title: Templating and trying to reference context path from inside a CSS file
body: <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>