title: CSS Challenge: Background-Image with 100% height - White Space when Scrolling Mobile
body: <p>CSS Challenge:</p>
  
  <p>This CSS gets my background to fill 100% of the screen height but there is a minor problem - when you scroll down there is initially white space, then when you release your finger and stop scrolling the background image "adjusts" and fills 100% of the screen height again. The problem does not re-occur on the same page if you continue to scroll, just the first time.</p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="background"&gt;&lt;/div&gt;
    &lt;div class="content"&gt;&lt;/div&gt;
  &lt;/body&gt; 
  </code></pre>
  
  <p>and the CSS:</p>
  
  <pre><code>html{
       height:100%;
      }
  .background{
       position: fixed;
       z-index: 0;
       width: 100%;
       height: 100%;
       background-image: url('../image/backgroundpicture.jpg');
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
       background-position: 50% 10%; 
      }
  .content{
       width:100%;
       height:200px;
       position:relative;
       z-index:1;
       top:1800px;
       }
  </code></pre>
  
  <p>The Problem is there too, when I put the background-image in the Body!</p>