title: Load Images from within CSS resources in JSF 2.0
body: <p>I am new to JavaServer Faces and I'm trying to do the following:</p>
  
  <p>The template file "/template.xhtml" loads a stylesheet using</p>
  
  <pre><code>&lt;h:outputStylesheet library="style" name="default.css" /&gt;
  </code></pre>
  
  <p>Within that CSS file I want to link to images like so:</p>
  
  <pre><code>... background-image: url(LINK_TO_MY_IMAGE) ...
  </code></pre>
  
  <p>How do I reference that image (what should I write into LINK_TO_MY_IMAGE)?
  I already tried to use the direct link (<em>/contextroot/resources/images/foo.png</em>) and the JSF resources notation (<em>/contextroot/faces/javax.faces.resource/foo.png?ln=images</em>).</p>
  
  <p>My directory structure:</p>
  
  <pre><code>/resources/images  =&gt; contains image files
  /resources/style/default.css
  /WEB-INF/web.xml
  /WEB-INF/faces-config.xml
  /template.xhtml
  /demoPage.xhtml  =&gt; uses the template.xhtml
  </code></pre>
  
  <p>So, my problem so far is that I always get a "404 Not Found" for loading that images.</p>