title: how to add background images using css in phonegap
body: <p>I am making a tab for mobile device in phonegap. I want to add image as background for the tabs. The problem is that it does not add any background image. here is my directory structure</p>
  
  <p>images are in this folder</p>
  
  <pre><code>www/img/tabs.png
  </code></pre>
  
  <p>In css below I am using path to images like this url(./img/tabs.png) top left no-repeat; which does not work.
  here is are my css files</p>
  
  <pre><code>www/stylesheet/css/frames/footer.css
  </code></pre>
  
  <p>here is are all of my pages located</p>
  
  <pre><code>www/pages/home.html
  </code></pre>
  
  <p>and here is my css </p>
  
  <pre><code>footer {
      position: absolute;
      z-index: 2;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 48px;
      padding: 0;
      background: #535353; 
  }
  
  footer ul {
      margin: 0;
      padding: 0;
      list-style-type: none; 
  }
  
  footer ul li {
      float: left;
      padding: 5% 10.9%;
      background: url(./img/tabs.png) top left no-repeat; 
  }
  
  footer ul li a {
      width: 100%;
      height: 100%;
      color: #fff;
      text-decoration: none; 
  }
  
  footer ul li a .current {
      background: url(./img/tabs.png) bottom left no-repeat; 
  }
  </code></pre>
  
  <p>here is my html</p>
  
  <pre><code>&lt;header&gt;
      Header
  &lt;/header&gt;
  &lt;section id="wrapper"&gt;
      &lt;div id="scroll-content"&gt;
  
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;footer&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Photo&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/footer&gt;
  </code></pre>