Background image shows through briefly

Question

I have a site that uses a large centered background image, which naturally loads a tad slower than the other elements on the page. For the most part this works okay, but there is also a repeat-x background image that covers the background for large monitors. The only problem is that this smaller file loads first and flashes briefly before the large image loads fully. Is there a way to have the large image load first so it is in place before the repeating background image loads? Thanks!

Answer 1

I don't know whether there is a way to accomplish that but you can use either javascript or jquery to change your dom elements show priority.

Answer 2

There's no way using strictly css to absolutely control the order images load.

The browser will try to download the images in the order they're listed in the css file, so putting your large background iage first will help, but the download time is gonna make it a moot point more than likely.

You could load the larger background via javascript once the rest of the DOM has loaded if it's worth going that far.

Answer 3

I figured out the answer to my own question: Instead of repeating the whole pattern of the upper body, I used only the pattern portion that is where the main content is. This loads quickly and looks natural behind the content while the large image loads. Thanks Aaron for the reply.