title: CSS Background "cover" not showing correctly after page reload
body: <p>I'm trying to put a image background in a fullscreen div.</p>
  
  <p>What's working:</p>
  
  <ol>
  <li>load the code in a browser</li>
  <li>reload the page</li>
  <li>the background should display correctly</li>
  </ol>
  
  <p>The problem:</p>
  
  <ol>
  <li>load the code in a <code>Chrome</code> browser</li>
  <li><strong>make sure the page is scrolled down</strong></li>
  <li>reload the page</li>
  <li>the background is mangled</li>
  </ol>
  
  <p>I would not using the <code>&lt;html&gt;</code> tag as I need to swap the background and do animations which would corrupt the html.  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
      html, body, #background { height:100%; margin:0px; }
  
      #background{
          width:100%;
          top: 0;
          position: fixed;
          background: url(http://lorempixel.com/400/200/sports/) no-repeat center center #fc0;
          background-size: cover;
          background-attachment: fixed;
          z-index: -1;
      }
  
      #content { background: #0cf; width:400px; height:2000px; margin: 0 auto; }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="background"&gt;&lt;/div&gt;
    &lt;div id="content"&gt;The content&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Please note I'm not using <code>JSfiddle</code> as to test this behaviour we actually need to reload the page.</p>
  
  <p>Here's some images, sorry for the delay in my reply!</p>
  
  <p>1) Here is what happens when I first load the page</p>
  
  <p><img src="https://i.stack.imgur.com/KgPf0.png" alt="When I first load the page"></p>
  
  <p>2) When I scroll down</p>
  
  <p><img src="https://i.stack.imgur.com/kXIEQ.png" alt="When I scroll down"></p>
  
  <p>3) If, while my scrollbar is down, I reload the page I get this!</p>
  
  <p><img src="https://i.stack.imgur.com/hsvYH.png" alt="On page reload"></p>