Question

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:

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')";
}

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!

If everything is cached it’s fine, but otherwise there is this annoying resizing effect on the background image!

How can I avoid the background image to load prior to the content, so that it appears in the correct with the first time!

Answer 1

Why not just always show scroll bars (simulate IE’s behavior in other browsers) like so:

html {
     overflow: -moz-scrollbars-vertical;
     overflow: scroll;
}

Here is a demo (in CSS Desk) to see if it gives you the behavior you are looking for.