title: jQuery mobile background image
body: <p>I am building a jQuery mobile site, and I am trying to insert a scalable image into the background, which would adjust to screen size of the phone.
  This is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
  &lt;head&gt; 
  &lt;title&gt;Discover Dubrovnik&lt;/title&gt; 
  &lt;link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" /&gt;
  &lt;script type="text/javascript" src="jquery-1.5.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jquery.mobile-1.0a4.1.min.js"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
  .ui-page {
      background: transparent url(image.gif);
  }
  &lt;/style&gt;
  
  &lt;/head&gt; 
  &lt;body&gt; 
  
  &lt;div data-role="page" data-theme="b"&gt;
  
  &lt;div data-role="header"&gt;
      &lt;h1&gt;Header tex&lt;/h1&gt;
  &lt;/div&gt;&lt;!-- /header --&gt;
  
  &lt;div data-role="content" data-theme="d"&gt;    
  some text
      &lt;/div&gt;&lt;!-- /content --&gt;
  
  &lt;div data-role="footer"&gt;
  &lt;h1&gt;Neki izbornik&lt;/h1&gt;
  &lt;/div&gt;
  &lt;/div&gt;&lt;!-- /page --&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>When the window is in fullscreen, I get background image, but when I resize it/make it smaller (like the screen in phones), the image isn't resized and it is not centered, so I can only see one part of it...</p>
  
  <p>Connected jQuery and CSS files are downloaded from jquerymobile.com</p>