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
– Daniel, Commented Aug 28, 2013 at 6: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
– noone, Commented Aug 28, 2013 at 6: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
– kark, Commented Aug 28, 2013 at 6:57
@noone the problem not related to browser side,Ofcourse the images are in correct path as i mentioned above — kark
– kark, Commented Aug 28, 2013 at 6:59
@kark , here is your answer stackoverflow.com/a/15000857/617373 read it all... and check this out too showcase.omnifaces.org/resourcehandlers/UnmappedResourceHandler — Daniel
– Daniel, Commented Aug 28, 2013 at 7:03

Community · Accepted Answer · 2017-05-23 11:53:35Z

6

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

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Aug 28, 2013 at 9:10

Daniel

37.2k10 gold badges122 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can't loading CSS images in JSF

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related