Can't loading CSS images in JSF

Question

Description : In my JSF application, I am setting the menu background images through CSS property.

I configured the file structure as follows

• This is my CSS code

Style.css

  #menu 
  {
   height:35px;
   width:950px;
   background:url(images/default.gif);
   /*background:url(#{resource['images:default.gif']}); 
   background:url(#{resource['images/default.gif']});
   */
  }

and this CSS file is under /resources/css directory, and I am importing the css file in Facelets page using

<h:head>
<h:outputStylesheet library="css" name="style.css"></h:outputStylesheet>
</h:head>

There is no problem in importing CSS file

Problem description

• I mapped the FacesServlet on *.xhtml:

   <servlet-mapping>
   <servlet-name>Faces Servlet</servlet-name>
   <url-pattern>*.xhtml</url-pattern>
   </servlet-mapping>
  

  If I run the home page , the menu images which is configured in css is not loading

• When I remove the FacesServlet mapped configuration on *.xhtml the images are is loading perfectly

i have tried

I have tried the following methods in css file to load an image

1. background:url(images/default.gif);
2. background:url(#{resource['images:default.gif']});
3. background:url(#{resource['images/default.gif']});

But I couldn't find the solution yet.

Updated Solution

• Added Resource handler in faces-config.xml

  <application><resource-handler>org.omnifaces.resourcehandler.UnmappedResourceHandler</resource-handler> </application>

• FacesServlet Configuration in web.xml

  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>
    <url-pattern>/javax.faces.resource/*</url-pattern>
  </servlet-mapping>
  

• Place images under /resources/images directory

• Image accessing format in css file

  #menu {background: url(images/bg.png) }

Answer 1

You can use the UnmappedResourceHandler by OmniFaces to solve that

This resource handler will produce unmapped URLs like /javax.faces.resource/css/style.css. This has the major advantage that the developer don't need the #{resource} EL expression anymore in order to properly reference relative URLs to images in CSS files.

Or take a look at the similar question/answer over here: Prevent suffix from being added to resources when page loads