Templating and trying to reference context path from inside a CSS file

Question

I'm working with JSF and XHTML templates , I'm using a CSS file in the templates, the background images being called like:

background-image: url("../../images/imageFile.jpg");

Because I'm using templates I found out that I must keep same depth for both pages and styles/images to pages apply styles correctly, but the project had changes and now it requires variable depth for folders and pages, making this approach no longer viable.

Then my question is:

Is there some way to replace relative paths ( ../../ , ../ , etc) by the context path ( <%Request.getContextPath()%> , #{facesContext.requestContextPath} , etc), inside the CSS file?

-----UPDATE-----

Absolute paths are out of the question. I need my template-based pages (whichever depth they are) be able to find the style and image resources referenced from my CSS file.

Currently this is possible only if pages, styles and images share the same level of depth in the application's folder structure, but I can't keep any more this approach because the new project requirements prevent me to do this.

Example of my project files structure, being <root> the path to application root:

CSS (depth-2): <root>/styles/global/myStyles.css Includes styles with depth-2 path references such as:

background-image: url("../../images/imageFile.jpg");

images (depth-2): <root>/images/basic/imageFile.jpg

templates (depth-2): <root>/template/general/template1.xhtml

page (depth-2): <root>/pages/folder1/page1.xhtml (works OK)

page (depth-N): <root>/pages/folder1/.../folderN/page2.xhtml (broken images and styles)

Answer 1

Those paths are relative to the request URL of the CSS file itself. It seems pretty trivial to me to group them at the same root level as the CSS file itself. Eg /css for CSS files and /css/images for CSS background images. This way you can use url('images/name.ext') all the way.

I don't see how it is useful to change the paths everytime. Just keep them consistent and if necessary document it clearly so that it's clear to everyone now and in the future.

Answer 2

I have the same problem in a JSF2 project, in css file you can't access contextPath or similar.

In css you can define the same selector (#headerImg in my case) multiple times, the resulting css is a merge of the properties, in case of conflict the 'last' one loaded wins.

so i leave in css file only the properties that doesn't need any kind of path, then modify the css selector in my 'root' xhtml template file, for example

<load css files >
    <style type="text/css">
#headerImg {
    background: url("${request.contextPath}/resources/images/header.jpg") no-repeat scroll center center #FFCC3D;
}
[...]
</style>