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

StackOverflow https://stackoverflow.com/questions/1013057

  •  06-07-2019
  •  | 
  •  

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?

Was it helpful?

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.

OTHER TIPS

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

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>

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.

I got this solution: create a new .css file with this content

body {
background-image: url(../resources/images/Fondo.GIF);
}

this will load the file in the same way html would do. With this, you will be able to load a background file at level of body (on the whole page). After wards you can load the css file with this instruction in the jsf file:

<h:head>
    <h:outputStylesheet name="ps-pagolinea.css" library="css" />
    <h:outputScript name="corrigePoliza.js" library="scripts"/>
</h:head>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top