Background url path in a jsf template

Question

i\'m in trouble here. I have a JSF application that has a template file called baseTemplate.xhtml. This file is located in /resources/template folder. Follo

Answer 1

Your case is simple. I copy it :

/
 pages/
     home.xhtml (using the template)
 resources/
     css/
         cssLayout.css
         imgSite/
             sisLogo.png
     templates/
         baseTemplate.xhtml

Small pertinent advice : when you do not know how to use relative path or when you have problem to implement it, simply use absolute path. Absolute paths have the powerful advantage in some cases to be mesured from the root. So they are more simple.

In your case, regardless of the structure, you can do this :

/Name of your project/PathToTheImage

Exemple :(Let's suppose your project is called "NewYork". It's just a name! You should do)

/NewYord/resources/css/imgSite/sisLogo.png

I suppose you know that you have to include the css path in the jsf code.

Exemple : (in your case, you have to put this in your code xhtml who need this css)

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

hope help.

Thanks

Answer 2

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?