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

This question already has answers here: 开发者_开发问答 How to reference JSF image resource as CSS background image url (2 answers) Closed 8 years ago.

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.

---

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.

---

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

---

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

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

---

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}']})";
}

Usage:

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