How to Add Background Images in a Jsf Application Using Richfaces and CSS

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

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.

Richfaces ModalPanel - title background image

This should be possible by inserting a header facet into the modal panel with the content that you wish to appear in the panel.

<f:facet name="header">
   <div style="background: url("/bla/foo.png") repeat-x scroll 50% 50% #F36D21;" />
</f:facet>

On the inside you can just declare a div with a repeating background image as a backdrop to other content in your facet header.

How to add background image and icon to a JSF button?

So you want a button with two background images? That's not possible on a single HTML element. The <h:commandButton> generates an single HTML <input type="submit"> element, while you basically need a <button type="submit" class="background"><span class="icon"> instead. You'd need to create a custom component which generates exactly that HTML, or to adopt a 3rd party component librarty which has such a component in its set, such as PrimeFaces. See also the <p:commandButton> showcase.

How to reference JSF image resource as CSS background image url

When importing CSS stylesheets by <h:outputStylesheet>, the stylesheet is imported and processed by the FacesServlet through /javax.faces.resource/*. Look at the generated <link> element pointing to the stylesheet in question and you'll understand.

You have to change all url() dependencies to use #{resource['library:location']} instead. JSF will then auto-substitute it with the right path. Given your folder structure, you need to replace

.c2 {
    background: url("/resources/images/smiley.jpg");  
}

by

.c2 {
    background: url("#{resource['images/smiley.jpg']}");  
}

Assuming that your webapp context name is playground and that your FacesServlet is mapped on *.xhtml, then the above should end up in the returned CSS file as follows

.c2 {
    background: url("/playground/javax.faces.resource/images/smiley.jpg.xhtml");
}

Noted should be that the JSF implementation will for determine only during the first request on the CSS file if it contains EL expressions. If it doesn't then it will for efficiency not anymore attempt to EL-evaluate the CSS file content. So if you add an EL expression to a CSS file for the first time, then you'd need to restart the whole application in order to get JSF to re-check the CSS file.

In case you wanted to reference a resource from a component library such as PrimeFaces, then prefix the library name, separated with :. E.g. when you're using PrimeFaces "Start" theme which is identified by primefaces-start

.c2 {
    background: url("#{resource['primefaces-start:images/ui-bg_gloss-wave_50_6eac2c_500x100.png']}");  
}

This will be generated as

.c2 {
    background: url("/playground/javax.faces.resource/images/ui-bg_gloss-wave_50_6eac2c_500x100.png.xhtml?ln=primefaces-start");
}

See also:

• How to reference CSS / JS / image resource in Facelets template?
• Changing JSF prefix to suffix mapping forces me to reapply the mapping on CSS background images

---

Unrelated to the concrete problem, the way how you use the library is not entirely right. It's meant to be the common identifier/subfolder of all related CSS/JS/image resources. The key idea is to be able to change the entire look'n'feel by just changing the library (which can be done by EL). You seem however to be relying on the default library. In that case, you could just omit the library from your <h:outputStylesheet> and #{resource}.

<h:outputStylesheet name="css/style.css"  />

See also:

• What is the JSF resource library for and how should it be used?

Modify the Background of the Button in Richfaces

I have solved the problem.

I use the next CSS style

input[type="button"].sButton
{
     background-image:url('../imgs/btnTexture2.jpg');
     background-repeat:repeat-x;
     color: white;
}

With that rule the background-image is changed.
I didn't have to use a "styleclass definetion under /view/stylesheet/theme.css"(whatever that means).

like I said the problem is that RichFace's style have more priority that a rule like

.sButton
{
     background-image:url('../imgs/btnTexture2.jpg');
     background-repeat:repeat-x;
     color: white;
}

The files were applied in the next order

panel.ecss
skinning.ecss
myStyleFile.css

for that reason, I did a rule with 2 conditions in order to have the more priority, with this change the final order was

myStyleFile.css
panel.ecss
skinning.ecss

It was easier than I had thought.

how can I override background-image of rich:inputNumberSpinner

there are many useful tips on creating mobile applications with RichFaces 4 in Getting Started With Mobile RichFaces document. You could use mobile-optimized skin (see step 3).

Another solution might be using !important in your CSS definition:

<style type="text/css">
    .rf-insp-inc{background-image: url(../../pics/icon_up.jpg) !important;}
</style>

Regards,
Palo

---

Related Topics