title: CSS background-position not working in Mobile Safari (iPhone/iPad)
body: <p>I have an issue with background-position in mobile safari. It works fine on other desktop browsers, but not on iPhone or iPad.</p>
  
  <pre><code>body {
   background-color: #000000;
   background-image: url('images/background_top.png');
   background-repeat: no-repeat;
   background-position: center top;
   overflow: auto;
   padding: 0px;
   margin: 0px;
   font-family: "Arial";
  }
  
  #header {
   width: 1030px;
   height: 215px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 85px;
   background-image: url('images/header.png');
  }
  
  #main-content {
   width: 1000px;
   height: auto;
   margin-left: auto;
   margin-right: auto;
   padding-left: 15px;
   padding-right: 15px;
   padding-top: 15px;
   padding-bottom: 15px;
   background-image: url('images/content_bg.png');
   background-repeat: repeat-y;
  }
  
  #footer {
   width: 100%;
   height: 343px;
   background-image: url('images/background_bottom.png');
   background-position: center;
   background-repeat: no-repeat;
  }
  </code></pre>
  
  <p>Both "background_top.png" and "background_bottom.png" are shifted too far to the left. I've googled around, and as far as I can tell, background-position <strong><em>IS</em></strong> supported in mobile safari. I've also tried every combination of keywords ("top", "center", etc.), px, and %. Any thoughts?</p>
  
  <p>Thanks!</p>
  
  <p>Update: here's the markup in the .html file, which displays the design &amp; layout fine in other browsers: (I also updated the above css)</p>
  
  <pre><code>&lt;html lang="en"&gt;
   &lt;head&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;link rel="Stylesheet" type="text/css" href="styles.css" /&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;div id="header"&gt;&lt;/div&gt;
    &lt;div id="main-content"&gt;&lt;/div&gt;
    &lt;div id="footer"&gt;&lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Both background images are very wide (~2000px) so as to take up space on any sized browser.</p>
  
  <p>P.S. I know that there's probably a few more efficient CSS shortcuts I could be using, but for now I like having the code organized like I have it for visibility.</p>