title: Background image jumps when address bar hides iOS/Android/Mobile Chrome
body: <p>I'm currently developing a responsive site using Twitter Bootstrap.</p>
  
  <p>The site has a full screen background image across mobile/tablet/desktop. These images rotate and fade through each, using two divs.</p>
  
  <p>It's nearly perfect, except one issue. Using iOS Safari, Android Browser or Chrome on Android the background jumps slightly when a user scrolls down the page and causes the address bar to hide.</p>
  
  <p>The site is here: <a href="http://lt2.daveclarke.me/" rel="noreferrer">http://lt2.daveclarke.me/</a></p>
  
  <p>Visit it on a mobile device and scroll down and you should see the image resize/move. </p>
  
  <p>The code I'm using for the background DIV is as follows:</p>
  
  <pre><code>#bg1 {
      background-color: #3d3d3f;
      background-repeat:no-repeat;
      background-attachment:fixed;
      background-position:center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover; position:fixed;
      width:100%;
      height:100%;
      left:0px;
      top:0px;
      z-index:-1;
      display:none;
  }
  </code></pre>
  
  <p>All suggestions welcome - this has been doing my head in for a while!!</p>