background-image replacement removes background

[joebob]

Hi! I am using a full-screen photo as a background. My goal was to set a low res version initially then load a high res version after the page had finished loading. The best way I found to accomplish this was using jQuery but when I set the css attribute the initial low res image was removed (white bg) until the high res version loaded. I spent a long time trying to figure out how to resolve this and it is now working so I thought I’d post what I found and see if anyone has any better method.

html {

height: auto;



/*

color/transparent didn't matter

*/

background-color: white;

background-position: center center;

background-attachment: fixed;

background-repeat: no-repeat;



-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;



background-image: url(../images/bg-low.jpg);

}

.bgHighRes {

/*

this is what I had initially, so the fix is the next line:

background-image: url(../images/bg.jpg);

*/

background-image: url(../images/bg.jpg),url(../images/bg-low.jpg);

}

$(window).bind("load",function(){

$("html").addClass("bgHighRes")

})

[Chris Coyier]

You might have to do something fancy like inject the high res onto the page as an img, just hidden with CSS. Then watch for that img’s load event, and then replace the background image, that way it’ll snag the image from cache and go faster.

[joebob]

Thanks for the follow-up, Chris. Do you think that’s easier than this solution? Seems that putting both the initial low res and high res backgrounds on the addClass solves this pretty simply. With your response and none from anyone else I must be on to something.

[joebob]

Or do you have a better method of progressively loading the sites background image after the content has loaded?

[jtrinker]

Hi joebob,

I’m trying to replace a low-resolution full screen background image with a high-resolution image after the high res image finishes loading. I found your code snippet but it doesn’t seemto be working for me.

*This is a test*

And then the jquery:

$(window).bind("load",function(){

$("html").addClass("bgHighRes")

});

When I test it only the low-res image loads. It seems like the jquery is loading the .bgHighRes css class but not the image. Any ideas?

Thank you!

[Historical Forums User]

@jtrinker you must put the 2 .js scripts one after the other and before the style tag: first include jquery library and after that , include the other script !

Also, take a close look at Chris’s post!
Cheers!

[jtrinker]

Thank you! That fixed it. I appreciate you looking at it.

[Author]

Posts