Most efficient position for background-image property in a style sheet

Question

I am placing a large, non-repeating background image on my website using the CSS background property. Since the image is so large, it takes a long time for some connections to render the image.

Here is my CSS:

#wrapper {
    background: url('large-image.jpg) no-repeat center center;
}

I have already done the following to optimize the image for the web:

• Reduced it to the lowest possible resolution that does not compromise quality
• Changed the image type from a PNG to a JPEG
• Styled the page so that the content is readable even without the background image

My question: To further optimize the image loading time, would it make a difference if I put the background tag at the bottom of my style sheet? Or would the effect of this be negligible?

I tend to order my CSS by the hierarchy of my HTML, so the #wrapper styles are at the top of my style sheet. Does the order of properties in a style sheet make a noticeable impact on load time when the user has a slower connection?

Answer 1

Location in the stylesheet will not affect the load time.

What you can do though is prevent it loading in some cases, such as on a cellphone.

For reference: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Those media queries aren't fail-proof, but they'll catch alot of the slower cases, which would generally be mobile devices. On the other hand, if somebody is on a 56k modem with their desktop, I just don't know what to do about it (maybe they're used to it).

You can use Jquery and waitforimages to ensure it loads after all other images, if you wish.

Answer 2

What could affect perceived loading time is initial #wrapper availability - i.e. if at the time of the initial load it is not part of the page and is added with JS, the background image will not begin loading - but I doubt this would be a common scenario.

Background image loading does not affect domready handlers, however if you want to speed up background availability you could try the following:

#wrapper {
    background: url(large-image.png) no-repeat center center,
                url(small-image.png) no-repeat center center;
}

From mdn:

With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.

What this does is effectively allows you to load a lower-res image as the bottom layer of the background, while the expensive hi-res image is still loading. Remember the good old times of lowsrc? That's the behaviour we're simulating. Note that both the low- and the hi-res image downloads begin simultaneously, so use this only if the large image is truly unbearably large.

Also: you're saying you've optimized the image; I still suggest you try Yahoo SmushIt, you'd be surprised how muich redundant data can be stripped from a PNG witout loss of quality (I currently have intermittent problems using their service, but it works after a few attempts, alternatively you could use OptiPNG but imo it would be too much effort to set it up and configure for a single image)

Update:

It has been suggested you wait for domready to fire and add your style using $("#wrapper").css(...);. What that does is add inline styling to an element, which would 1) interfere with selector specificity 2) only apply to this particular instance of #wrapper (bad if, say, it is part of ajax content coming from the server).

You could alternatively add a new css rule at runtime:

$('head').append('<style type="text/css">#wrapper {background: url(large-image.jpg) no-repeat center center;}</style>');

This would be organically added to document stylesheets and apply to all future instances of #wrapper, as well as not interfere with selector specificity. You still end up with a brief flash of unstyled content (before the handler is fired and the style is applied) so I don't advocate this approach.