Pattern and attempt to link to context path from inside CSS file

Question

I work with JSF and XHTML templates, I use the CSS file in the templates, the so-called background images:

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

Since I use templates, I found that I have to keep the same depth for pages and styles / images so that the pages apply styles correctly, but the project has changes, and now it requires a variable depth for folders and pages, making this approach more unviable.

Then my question is:

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

----- ----- UPDATE

Absolute paths are out of the question. I need my template pages (regardless of their depth) to find the style and image resources that my CSS file links to.

Currently, this is possible only if the pages, styles and images have the same depth level in the folder structure of the application, but I can no longer support this approach, because the new project requirements do not allow me to do this.

An example of my project file structure, the <root>path to the root of the application:

CSS (depth-2): <root>/styles/global/myStyles.css Includes styles with links to the depth-2 path, for example:

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

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

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

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

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

Answer 1

URL- CSS. , CSS. . /css CSS /css/images CSS. url('images/name.ext') .

, . , .

Answer 2

JSF2, css contextPath .

css (#headerImg ) , css - , "" .

css , - , css xHtml "root",

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