How do I add background images in a JSF application using richfaces and CSS?

I just had the same problem with JSF 2.0. I had to use a CSS and the solution with the relative path didn't work for me either (like Choghere posted).

In my book I read that when you use Facelets as VDL (View Declaration Language) it is possible to use expressions even in a plain HTML page. So I got the idea to put a EL directly in my CSS. Note: I didn't have to change the filename or anything.

Here is what I did. but first my filestructure:

• /resources/common/overlay.xhtml -> this one icludes the following css (its a composite component)
• /resources/common/overlay.css
• /resources/images/logo.png

Now here comes the CSS:

.someclass { 
    background-image:url("#{resource['images:logo.png']}"); 
}

in this case resource is an implicit object of JSF 2, images is the library where JSF should look (jsf expects all libraries/files under resources, at least the default ResourceHandler) and then the name of the resource.

For deeper structures it would be:

#{resource['images/folder:logo.png']}

Hope that helps ;)

Assuming the element in question is getting a class="rich-ddmenu-label" applied to it, the problem is likely the path to the background image.

The path is relative to where the CSS is located. If it's in an external file, it should be relative to that, e.g.:

/css/styles.css
/images/the_image.gif

the CSS should be:

background-image: url("../images/the_image.gif");

If the CSS is inline on the HTML page, it will be relative to the current path. So if the page is located at http://server/path/to/page, it will look for the image at http://server/path/to/page/images/the_image.gif, when you probably meant http://server/images/the_image.gif.

If that doesn't answer it, please post the generated HTML.