title: Background url path in a jsf template
body: <p>i'm in trouble here. I have a JSF application that has a template file called <strong>baseTemplate.xhtml</strong>. This file is located in /resources/template folder. Follows the file code:</p>
  
  <pre><code>&lt;?xml version='1.0' encoding='UTF-8' ?&gt; 
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"&gt;
      &lt;h:head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
          &lt;h:outputStylesheet library="css" name="default.css"/&gt;
          &lt;h:outputStylesheet library="css" name="cssLayout.css"/&gt;
          &lt;h:outputStylesheet library="css" name="menu.css"/&gt;
          &lt;h:outputStylesheet library="css" name="rodape.css"/&gt;
          &lt;title&gt;JSF Project&lt;/title&gt;
      &lt;/h:head&gt;
      &lt;h:body&gt;
          &lt;div id="estrutura"&gt;
              &lt;div class="top"&gt;
                  &lt;ui:insert name="top"&gt;
                      &lt;ui:include src="somefile"/&gt;
                  &lt;/ui:insert&gt;
              &lt;/div&gt;
              &lt;div id="menu"&gt;
                  &lt;ui:insert name="menu"&gt;
                      &lt;ui:include src="somefile"/&gt;
                  &lt;/ui:insert&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;div id="left"&gt;
                      &lt;ui:insert name="left"&gt;
                      &lt;/ui:insert&gt;
                  &lt;/div&gt;
                  &lt;div id="content" class="left_content"&gt;
                      &lt;ui:insert name="content"&gt;&lt;/ui:insert&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="bottom"&gt;
                  &lt;ui:insert name="bottom"&gt;
                      &lt;ui:include src="somefile"/&gt;
                  &lt;/ui:insert&gt;
              &lt;/div&gt;
          &lt;/div&gt;    
        &lt;/h:body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In my <strong>cssLayout.css</strong> file, located inside /resources/css folder, i have the following rule:</p>
  
  <pre><code>.top {
     position: relative;
     height: 120px;
     padding: 0;
     margin: 0 0 15px 0;
     background-image: url('imgSite/sisLogo.png');
     background-repeat: no-repeat;
  }
  </code></pre>
  
  <p>The image sisLogo.png is located under /resources/css/imgSite. All pages from my app are inside <strong>/pages</strong>. When i use the template, he doesn't load the image background for <strong>top</strong>, but other css properties are loaded. Seems to be a background-image url path problem. How i could solve this?</p>
  
  <p>The project folder structure is as follows:</p>
  
  <pre><code>/
   pages/
       home.xhtml (using the template)
   resources/
       css/
           cssLayout.css
           imgSite/
               sisLogo.png
       templates/
           baseTemplate.xhtml
  </code></pre>