title: How to use 100% CSS background-image with scrolling content?
body: <p>I want to create a site with a background image that always fills the entire window, even if the content can scroll vertically.</p>
  
  <p>I have created <a href="http://jsfiddle.net/3GN4J/1/">this JSFiddle</a> using background-size:cover to scale the background-image to the window.</p>
  
  <p>It works, as long as the divs inside are smaller than the window.
  If you scroll vertically, the background image does not fill the page anymore, and shows a white/grey area instead.</p>
  
  <p>So my question is: how can I combine a 100% background image with scrolling content?
  This is my CSS:</p>
  
  <pre><code>html {
      height: 100%;
      margin:0px;
      background-color:#999999;
      background-image: url(http://s22.postimg.org/e03w9stjl/main_bg.png);
      background-position:center;
      background-repeat:no-repeat;
      background-size: cover;
  }
  body {
      min-height: 100%;
      margin:0px;
  }
  #appcontainer {
      position: absolute;
      background-color: rgba(255, 255, 255, 0.7);
      width:560px; height:2220px;
      left:20px; top:20px;
  }
  </code></pre>
  
  <p>And HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="appcontainer"&gt;
          This div causes the background image to stop scaling to the page.
      &lt;/div&gt;  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>