Load Images from within CSS resources in JSF 2.0 [duplicate]

Question

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

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

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

Within that CSS file I want to link to images like so:

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

How do I reference that image (what should I write into LINK_TO_MY_IMAGE)? I already tried to use the direct link (/contextroot/resources/images/foo.png) and the JSF resources 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 so far is that I always get a "404 Not Found" for loading that images.

Answer 1

After much experimentation this works in the CSS:

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

In the above, msgError.gif is my resource located at /resources/images/msgError.gif I believe the .xhtml is just used to use the JSF FacesServlet (see web.xml)

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

The "ln" is the library name.

Answer 2

Add css into 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