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?

score 69 · Answer 1 · edited Dec 25 '22 at 01:37

69

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']}

edited Dec 25 '22 at 01:37

starball

20,030
7
43
238

answered Jan 09 '10 at 15:23

lostiniceland

3,729
6
38
50

3

thanks it works fine to me, the last approach, e.g: background-image:url("#{resource['images/bg-pattern-t.gif']}") – Valter Silva Jul 26 '11 at 18:28
Actually thats exactly that for what i have looked. A way to access ressources in css without writing an absolute path like /ressources/... – Sebastian Hoffmann Aug 07 '12 at 18:33
And if your images folder is nested one level down (ie: bootstrap/img), the EL would look like this: url(#{resource['bootstrap/img:icon.png']}); – Brando_Calrissian Sep 06 '13 at 20:04
Any clue how to do it with theming? – Random Sep 19 '13 at 07:42
@Brando_Calrissian that's not how it works. To have a better understanding of JSF resource libraries, check [What is the JSF resource library for and how should it be used?](http://stackoverflow.com/q/11988415/1065197) – Luiggi Mendoza Sep 24 '13 at 06:27

score 5 · Accepted Answer · answered Jun 18 '09 at 16:14

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.

I just needed two dotes before /images/the_image.gif. Thank you very very much! — user125157, Jun 18 '09 at 17:14
not exactly the correct answer for JSF. See the answer below that has 23 votes — Jonathan S. Fisher, Jul 01 '12 at 05:29

score 2 · Answer 3 · answered Jun 18 '09 at 14:52

2

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>

answered Jun 18 '09 at 14:52

Damo

11,410
5
57
74

That shows how to place an image next to words. I need to place some words on top of an image. Plenty of places show how to do that using HTML and CSS, but I can't get it to work with Richfaces and CSS. – user125157 Jun 18 '09 at 15:49
just apply a background-image to the panelGroup (or div or whatever you use) – Damo Jun 18 '09 at 16:49

score 2 · Answer 4 · answered Apr 28 '10 at 12:23

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.

score 1 · Answer 5 · answered Jan 25 '11 at 16:35

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>

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

5 Answers5

Linked