How to reference JSF image resource as CSS background image url

Tags: css,jsf,jsf-2,resources,background-image

Problem :

I often, change the images of my buttons using the image attribute, but someone told me that it is a good practice to do it using .css I tried but i cant, what i am doing wrong? This is what i did:

1-The resources of my project are stored like this:

enter image description here

2-This is how i created the style.css for accessing the image

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

3-This is how i access the css from the body of my page(Im sure this is correct because other classes in the same document works in other tags in this page)

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

4-This is how create a sample commandButton that uses the appropiated css class

<h:commandButton styleClass="c2"/>

I think the problem is in the .css, i tried a few combinations but none worked:

background-image: url(/resources/images/smiley.jpg);    
background: url(resources/images/smiley.jpg);   
background: url(smiley.jpg);    
background: url(../smiley.jpg); 

Where is the mistake?

update I managed to make it work by the following code:

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

Notice the difference when i use css(right) and when i use image attribute(left)

enter image description here

How could i solve this so the hold image is shown?

Solution :

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


.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:

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:

    CSS Howto..

    How get device resolution for loading sharp images but size fonts/divs properly with viewport width=device-width?

    How to auto-resize tabs to fit a fixed-width container?

    How can you create a cross browser css menu that doesnt require you to provide a style for EVERY LEVEL of the menu

    How to style dropdown menu using CSS in HTML

    How to hide/show the content of a div with dynamic height?

    How to mix 100% height with a minimum height

    How to control element position when changing window size for parallax purpose

    How to check if user is in high contrast mode via JavaScript or CSS

    How to place an image in table's right corner

    How can I have floated list items display their bullet in IE7?

    Can someone help me figure out how to put normal links into this Jquery Menu?

    how to position two transparent images to overlap opposite corners of a container div

    CSS - How to make a div as wide as a containing child img

    How to retrieve the background image url defined in CSS?

    How to remove extra space in navigation bar? [duplicate]

    How to add an image to a CSS popup box

    How do I resize an image in IE 8

    How To Create A Responsive Horizontal Layout Using CSS?

    How to determine why floated elements are affecting the heights of non-floated elements (D7 views blocks with zen theme)?

    server-side control - how set background with css ? (link & hover)

    How to Update Visual Studio's “Cascading Style Sheet Version for Validation”

    in Emacs, how to turn off abbrevs in css-mode?

    How to get css values in IE7 when “auto” is returned

    How do I prevent this double hover?

    How to get all CSS of element

    How to make an inline-element to occupy space above and below itself within a text using CSS?

    How to display CSS files in Django blog?

    how to set css property of one class from another class

    How to style html element directly (inline)?

    CSS img align: how to set a img middle-right align in a DIV