title: Jquery Mobile Android - Fixed full-screen background image?
body: <p>I'm trying to add a full screen fixed background image to the first page only of a jquery mobile app for Android (I'm also using phonegap).</p>
  
  <p>In a nutshell, I would like the background image to be fullscreen and fixed, while the page content scrolls above it. The background image also needs to scale to the size of different devices.</p>
  
  <p>Here is what I have so far... </p>
  
  <pre><code>&lt;div data-role="page" id="unit-list" data-theme="a"&gt; 
  
  &lt;div id="background"&gt;
  
  &lt;div data-role="header" data-theme="b"&gt;
      &lt;h1&gt;Header&lt;/h1&gt;
  &lt;/div&gt;&lt;!-- /header --&gt;
  
  &lt;div data-role="content" data-theme="a"&gt;    
  
      &lt;ul data-role="listview" data-theme="none"&gt;
          &lt;li&gt;List Item&lt;/li&gt;
          &lt;li&gt;List Item&lt;/li&gt;
          &lt;li&gt;List Item&lt;/li&gt;
      &lt;/ul&gt;
  
  &lt;/div&gt;&lt;!-- /content --&gt;
  
  &lt;/div&gt;&lt;!-- /background --&gt;
  
   &lt;/div&gt; &lt;!-- /page --&gt;
  </code></pre>
  
  <p>With this CSS:</p>
  
  <pre><code>#background {
      background: url(../images/background.png);
      width: 100% !important;
      height: auto !important;
      background-repeat: no-repeat;
      position: absolute;
      z-index: -1;
  }
  </code></pre>
  
  <p>This obviously doesn't work so any nudge in the right direction would be appreciated, thanks in advance.</p>