Issue Details : I am currently facing a problem with setting menu background images in my JSF application using CSS properties.
The file structure is as follows
- This is the CSS snippet
Style.css
#menu
{
height:35px;
width:950px;
background:url(images/default.gif);
/*background:url(#{resource['images:default.gif']});
background:url(#{resource['images/default.gif']});
*/
}
The CSS file is located under /resources/css directory, and
it is imported in Facelets page using
<h:head>
<h:outputStylesheet library="css" name="style.css"></h:outputStylesheet>
</h:head>
No issues with importing the CSS file
Problem Statement
FacesServlet is mapped to *.xhtml:
<servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.xhtml</url-pattern> </servlet-mapping>Upon running the home page, the menu images specified in the css are not loading
Removing the
FacesServletmapping on*.xhtmlresolves the image loading issue
Attempts Made
Tried various methods in the css file to load an image
background:url(images/default.gif);background:url(#{resource['images:default.gif']});background:url(#{resource['images/default.gif']});
However, a solution has not been found yet.
Updated Solution
Added Resource handler in
faces-config.xml<application><resource-handler>org.omnifaces.resourcehandler.UnmappedResourceHandler</resource-handler> </application>FacesServletConfiguration inweb.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/imagesdirectoryFormat for accessing images in css file
#menu {background: url(images/bg.png) }