Loading images from CSS resources in JSF 2.0

Question

I am new to JavaServer Faces and I am trying to do the following:

The template file "/template.xhtml" loads the stylesheet using

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

In this CSS file, I want to reference the images as follows:

 ... background-image: url(LINK_TO_MY_IMAGE) ... 

How do I reference this image (what should I write in LINK_TO_MY_IMAGE)? I already tried using a direct link (/contextroot/resources/images/foo.png) and JSF resource notation (/contextroot/faces/javax.faces.resource/foo.png?ln=images).

My directory structure:

 /resources/images => contains image files /resources/style/default.css /WEB-INF/web.xml /WEB-INF/faces-config.xml /template.xhtml /demoPage.xhtml => uses the template.xhtml 

So my problem is that I always get "404 Not Found" to load these images.

Answer 1

Add css to your XHTML

 <link href="#{facesContext.externalContext.requestContextPath}/resources/style/default.css" rel="stylesheet" type="text/css" /> 

and in CSS

 background-image: /resources/images/someName.png 

Answer 2

After much experimentation, this works in CSS:

 url("msgError.gif.xhtml?ln=images") 

In the above message, msgError.gif is my resource located in /resources/images/msgError.gif I believe that .xhtml is only used to use JSF FacesServlet (see Web.xml)

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

"ln" is the name of the library.

Answer 3

I don’t know why there are so many different ways ... but here is another way that works with inline CSS.

 <div style="background-image: url('/javax.faces.resource/images/someName.png.xhtml');"> Text to Display </div> 

Answer 4

SASS (SCSS) mixin

 //----------------------------------------------------------------------------- // resource_url function returns the parameter as url(#{resource['<parameter>']}) // and should be used instead of CSS url() or compass image_url() in JSF applications. // Define JSF Resource Library resource['standard: @function resource_url($url) { @return url + "(\#{resource['test:#{$url}']})"; } 

Application:

 background: resource_url('img/footer_trenner.gif') no-repeat center left;