title: How do I avoid a fullscreen background image to scale with appearing scroll bars?
body: <p>my client wants a fullscreen background for her new Website. The setup wasn't that complicated as I opted for a CSS3-method with a fallback for older IE-Versions. Here is the CSS:</p>
  
  <pre><code>html {
      /* Fullscreen backgroung image per CSS3 with 'background-size: cover' */
      background: url(../images/background.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
      -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
  }
  </code></pre>
  
  <p>Now this does work as advertised. But when I reload a page or go to another one, the background image loads, then the content appears, which causes vertical scroll bars which then makes the background image scale back a little (due to the now smaller viewing space) and produces a sort of "jumping" effect on the background image - very annoying!</p>
  
  <p>If everything is cached it's fine, but otherwise there is this annoying resizing effect on the background image!</p>
  
  <p>How can I avoid the background image to load prior to the content, so that it appears in the correct with the first time!</p>