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?
Thanks in advance.
-----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)