How to reference JSF image resource as CSS background image url

user_614141 0
Viewed 41442

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?

jsf-2 jsf resources background-image css
2 Answers

Since I struggled with this a little bit and while BalusC has already answered the question but might be able to comment as to why this is happening. I have 5 EAR projects consisting of a bundled WAR and EJB projects. I then have one standalone WAR project deployed on its own. The following code worked perfect with all the EAR's:

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Super FIPS Calculator PRO</title>
    <style>              
        .Bimage{background-image:url(#{request.contextPath}/img/phonetoolsBackground.png);}
    </style>
</h:head>
<h:body styleClass="Bimage">
.
.
.

Where the "img" folder was within the WEB-INF folder but for the EAR project, it would not work and it wouldnt even load the picture in the browser by manually typing in the URL. I verified the resulting html was 100% accurate. So all the talk of "resources" got me thinking that maybe it was a ?security? issue of some sort which doesnt seem to make sense between the WAR and EAR deployments so I created a "resources" folderin the root of the web application, e.g. in Eclipse its parent would be WebContent, then added a subfolder to resources called "img", placed my image in there.

The code now looks like this:

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Super FIPS Calculator PRO</title>
    <style>              
        .Bimage{background-image:url(#{request.contextPath}/resources/img/phonetoolsBackground.png);}
    </style>
</h:head>
<h:body styleClass="Bimage">
.
.
.

And now the image is displayed. Again not trying to hijack balusc's thorough answer, I just wanted to bring it up in case anyone ran into a similar issue. If someone wants me to open a separate Q and A I will!

Ahh yes, this was on JBoss EAP 7, Servlet API 3.1, Facelets 2.2, Rich Faces 4.5.17 Java 1.8.

Edit @Basil-Bourque answer What is WEB-INF used for in a Java EE web application seems fairly relevant

But its still a little confusing in that how can a WAR within an EAR access that location but not a standalone WAR?

user_72216280
Related