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

Question

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?

Answer 1

Are you following the example on the Richfaces demo site? ie. use a facet and place the image and text inside an enclosing element (eg. a span or div)

<rich:dropDownMenu>
    <f:facet name="label"> 
     <h:panelGroup>
      <h:graphicImage value="/images/icons/copy.gif" styleClass="pic"/>
      <h:outputText value="File"/>
     </h:panelGroup>
    </f:facet>
    <rich:menuItem submitMode="ajax" value="New"
     action="#{ddmenu.doNew}" icon="/images/icons/create_doc.gif">
    </rich:menuItem>
    ...
</rich:dropDownMenu>

Answer 2

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.

Answer 3

even background-image: url("../images/the_image.gif"); didnt work !! Team GNCH

Answer 4

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 posible to use expressions even in a plain HTML page. So I got the idea to put a EL directly in my css. Note: I didnt had 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 libaries/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 ;)

Answer 5

My folder structure is as follows:

web pages->resources->css //css pages

web pages->resources->pics //images

web pages //xhtml files

Try the below:

background-image :url("../pics/logo.gif");

.. moves you up one folder level /pics moves you into the pics directory /logo.gif gives you the file

Hope this helps.