CODEWITHSUNDEEP
htmlcssbrowser
Benjamin Pazdernik
Benjamin Pazdernik

Reputation: 85

How do I avoid a fullscreen background image to scale with appearing scroll bars?

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!

Upvotes: 4

Views: 1146

Answers (2)

Jonathan Freeman
Jonathan Freeman

Reputation: 11

Try adding a div, with fixed position and 100% width and height. Add your background styling to that div instead.

Upvotes: 1

Jason Sperske
Jason Sperske

Reputation: 30436

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.

Upvotes: 5

Related Questions