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. E.g. /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.