title: Fixed and centered background image in Mobile Safari (iOS 5), landscape and portrait
body: <p>I know questions like this have been asked here, but a lot of the existing questions have answers that are now outdated. What I am needing is the following: a web page with preferably only CSS and HTML that has a fixed and centered background image. The dimensions of the background image that I am using are 1024x1024 with the idea being that the image will cover the screen in landscape and portrait modes. The background image must also be fixed, meaning that if the content on the page is scrolled, the background image does not scroll with the content.</p>
  
  <p>I have a solution that <em>nearly</em> works:</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#background {
      background-image: url('background.jpg');
      background-position:center; 
      background-repeat: no-repeat;
      width: 100%; 
      height: 100%; 
      position: fixed; 
      z-index: 0; 
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="background"&gt;&lt;/div&gt;
      &lt;!-- content here --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This solution works fine in portrait mode; fixed and centered are both working fine. But when I turn the ipad into landscape mode, the background image does not immediately resize to fill the new width, insead it shows a white vertical stripe on the right-hand side. When I scroll the content, then the background image resizes and fills the width correctly.</p>
  
  <p>Does anyone know why the resize of the background is only happening when the page content is scrolled and does anyone know how to get this working correctly? I am only interested in this working in iOS 5, so the answer does not have to take other browsers or iOS 4 into account.</p>