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

css jsf richfaces
user125157 picture user125157 · Jun 18, 2009 · Viewed 55.2k times · Source

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

lostiniceland picture lostiniceland · Jan 9, 2010

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 ;)

Related questions

<h:inputText> enabled/disabled - change background color

can I change background color for disabled <h:inputText>? I've tried to do this way: <h:inputText value="test" disabled="true" styleClass="input"/> css contains: input:disabled {background-color:blue;} input:enabled {background-color:red;} and result is: …

Read More
How do I stop richfaces adding borders to panels and calendars?

I'm hoping to use a custom richfaces skin to handle the bulk of my presentation work. Unfortunately richfaces renders borders around every cell in a calendar component and around each panel. I would like to turn them off so that …

Read More
How to remove border from specific PrimeFaces p:panelGrid?

I have difficulty in removing border from a specific PrimeFaces <p:panelGrid>. <p:panelGrid styleClass="companyHeaderGrid"> <p:row> <p:column> Some tags </p:column> <p:column> Some tags &…

Read More