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

css, jsf, richfaces

Solution

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.

Problem

I'm making a website Using JSF and richfaces, but I need to do some background images on the drop down menu labels. I saw you can use the style attribute by doing ``` .rich-ddmenu-label { background-image: url("images/the_image.gif"); } ``` But that doesn't seem to even try and put a image anywhere. I can use an image using ``` <h:graphicImage/> ``` I don't know how to put text on top of it though. What am I doing wrong? How do I insert a background image behind some text?

Original source

Related problems