cssjsfrichfaces

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

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?

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.