How to Embed an CSS Background Image Link with Jsf

How can I embed an CSS background image link with JSF?

If I correctly understood your question:

In my project I've used this style:

<h1
 class="logo"
 style="background:url( #{mainMenuNavigationBean.headerImage} ) no-repeat;">

where mainMenuNavigationBean is a session bean where I set the headerImage based on some conditions.

Load Background image in css by JSF

h:outputStylesheet is for loading CSS files, to include an image file inside your JSF page you should use the h:graphicImage Tag like this:

<h:graphicImage name="blue.jpg" library="images"/>

Update:

In order to load a background Image, the best solution is to follow Tiny's suggestion (within comments) and use:

body{
    background-image: url("#{resource['images/blue.jpg']}");
}

See also:

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

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?

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.

Background url path in a jsf template

CSS background images are loaded relative to the request URL of the CSS file (and thus not immediately relative to its physical location in the web content). If you explore the generated HTML output of the <h:outputStylesheet>, then you'll see that the request URL has become different. Assuming a context path of /somecontext and a FacesServlet mapping of *.xhtml, it'll look like this:

<link rel="stylesheet" type="text/css" href="/somecontext/javax.faces.resource/cssLayout.css.xhtml?ln=css" />

Note that your (improper btw) usage of the library has moved the /css to ?ln=css. You'd need to fix the background image url() accordingly so that it's properly relative to the real request URL of the CSS. E.g.

background-image: url("../resources/css/imgSite/sisLogo.png");

A more reliable way, which takes JSF resource identifier rules and FacesServlet mapping into account, is to use #{resource} in EL:

background-image: url("#{resource['css:imgSite/sisLogo.png']}");

See also:

• Changing JSF prefix to suffix mapping forces me to reapply the mapping on CSS background images
• What is the JSF resource library for and how should it be used?

Reference a PrimeFaces image resource as CSS background image url

You're using the library the wrong way. The library can never be like images, css, js, etc in a sensible way. See also the bottom part of the answer on the question you found, which in turn references further to a must-read Q&A for JSF starters What is the JSF resource library for and how should it be used?

Given an image URL of /resources/primefaces-start/images/ui-bg_gloss-wave_50_6eac2c_500x100.png, the library part is clearly primefaces-start.

So, this should do:

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

background-image: url() in CSS h:outputStylesheet is not loading

You should be using the EL variable #{resource} in CSS to specify image resources.

background-image: url("#{resource['img/glyphicons-halflings.png']}");

See also:

• How to reference JSF image resource as CSS background image url

---

Related Topics