Databases
StackOverflow2013
Postsdbo
POTemplating and trying to reference context path from inside a CSS file
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTemplating and trying to reference context path from inside a CSS file
    text
    copied!<p>I'm working with <em>JSF</em> and <em>XHTML templates</em>, I'm using a CSS file in the templates, the background images being called like: </p> <pre><code>background-image: url("../../images/imageFile.jpg"); </code></pre> <p>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.</p> <p>Then my question is:</p> <p><strong>Is there some way to replace relative paths (</strong><code>../../</code><strong>,</strong> <code>../</code><strong>, etc) by the context path (</strong><code>&lt;%Request.getContextPath()%&gt;</code><strong>,</strong> <code>#{facesContext.requestContextPath}</code><strong>, etc), inside the CSS file?</strong></p> <p><strong>-----UPDATE-----</strong></p> <p>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. </p> <p>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.</p> <p>Example of my project files structure, being <code>&lt;root&gt;</code> the path to application root:</p> <p><strong>CSS (depth-2):</strong><code>&lt;root&gt;/styles/global/myStyles.css</code> Includes styles with depth-2 path references such as:</p> <pre><code>background-image: url("../../images/imageFile.jpg"); </code></pre> <p><strong>images (depth-2):</strong><code>&lt;root&gt;/images/basic/imageFile.jpg</code></p> <p><strong>templates (depth-2):</strong><code>&lt;root&gt;/template/general/template1.xhtml</code></p> <p><strong>page (depth-2):</strong><code>&lt;root&gt;/pages/folder1/page1.xhtml</code> <em>(works OK)</em></p> <p><strong>page (depth-N):</strong><code>&lt;root&gt;/pages/folder1/.../folderN/page2.xhtml</code> <em>(broken images and styles)</em></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload