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

background:url(images/default.gif);
background:url(#{resource['images:default.gif']});
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) }

how about `background:url("../resources/images/default.gif");` — Daniel, Aug 28 '13 at 06:42
Install Firefox. Install FireBug. Turn on FireBug. Go on your page and check the generated code. Is the .css really included? Could the file be found? Does your menu have the correct class? Is the image path correct? Was the image found? I'm sure you can narrow the problem down yourself with the correct tools... — noone, Aug 28 '13 at 06:49
@Daniel i tried as you said, still not loading , the problem i found out in `web.xml` , configuring the facesServelet `.xhtml` mapping, if i remove that ,it work quitely.How can i achieve this.. — kark, Aug 28 '13 at 06:57
@noone the problem not related to browser side,Ofcourse the images are in correct path as i mentioned above — kark, Aug 28 '13 at 06:59
@kark , here is your answer http://stackoverflow.com/a/15000857/617373 read it all... and check this out too http://showcase.omnifaces.org/resourcehandlers/UnmappedResourceHandler — Daniel, Aug 28 '13 at 07:03
@Daniel i have configured the `resourceHandlers` in `faces-config.xml` as per your link showcase.omnifaces.org/resourcehandlers/UnmappedResourceHandler..but i still still the `image` is loading .. — kark, Aug 28 '13 at 08:53
well it looked like it relevant, dunno, try the first solution in that answer, isn't the question there is exactly like your current one ? — Daniel, Aug 28 '13 at 08:58
@Daniel: The UnmappedResourceHandler by OmniFaces unfortunately doesn't support JSF libraries: > Note: the library is not supported by the UnmappedResourceHandler! > this is a technical limitation, just exclusively use name — Cerbenus, Jan 04 '15 at 20:16
You can just treat the library as prefix folder in name. E.g. given a ``, just instead use ``. — BalusC, Jan 04 '15 at 23:03

score 6 · Accepted Answer · edited May 23 '17 at 11:53

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

Can't loading CSS images in JSF

1 Answers1