The most efficient position for the background-image property in the stylesheet

Question

I host a large, non-repeating background image on my website using the CSS background property. Since the image is so large, for some images it takes a long time to display images.

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 to the smallest possible resolution, which does not degrade quality.
• Changed image type from PNG to JPEG
• Styles the page so that the content is readable even without a background image

My question is. To further optimize image loading time, would it change if I put the background tag at the bottom of my stylesheet? Or may the effect be negligible?

I try to arrange my CSS in the hierarchy of my HTML, so the #wrapper styles are at the top of my stylesheet. Is the order of properties in the stylesheet a noticeable effect on load time when the user has a slower connection?

Answer 1

What may affect the estimated load time is the initial #wrapper availability - that is, if it is not part of the page during the initial loading and is added using JS, the background image will not start loading - but I doubt this will be a common scenario.

Loading a background image does not affect domready handlers, however, if you want to speed up background availability, you can 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 on top of each other with the first background that you provide on top and the last background indicated in the back. Only the last background can include the background color.

What this does is effectively let you load a lower resolution image as the bottom layer of the background, while the expensive hi-res image is still loading. Remember the good old days of lowsrc ? This is the behavior that we mimic. Please note that downloading low and high resolution images starts at the same time, so use this only if the large image is really unbearably large.

Also: you say you optimized the image; I still suggest you try Yahoo SmushIt , you will be surprised how muich redundant data can be deleted due to PNG quality loss (I currently have intermittent problems using their service, but it works after several attempts, alternatively you you can use OptiPNG , but it would be too much effort to install it and configure for a single image)

Update:

It is assumed that you wait until domready will shoot, and add your style using $("#wrapper").css(...); . What this does is to add an inline style to an element that 1) interferes with the specifics of the selector 2) applies only to this particular instance of #wrapper (bad if, say, this is part of the ajax content coming from the server).

Instead, you can 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 will be organically added to the document style sheets and will apply to all future instances of #wrapper , and will also not interfere with the specifics of the selector. You still end up with a brief flash of unrelated content (before the handler gets fired and the style is applied), so I am not advocating this approach.

Answer 2

The location in the stylesheet does not affect the load time.

What you can do, although this prevents it from loading in some cases, for example, on a mobile phone.

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

These media queries are not fault tolerant, but they will understand the many slow cases that will usually be mobile devices. On the other hand, if someone is on a 56k modem with their own desktop, I just don’t know what to do with it (maybe they’re used to it).

You can use jQuery and waitforimages to ensure that it loads after all other images, if you like.

Answer 3

See this previous question . The CSS stylesheet will be fully loaded and evaluated before the page is shown, so the location of your CSS background does not matter in the stylesheet.

If you want the image to load only after the rest of the content is displayed, you can use jQuery:

 $(window).load(function(){ $("#wrapper").css({'background-image':'url("large-image.jpg")', 'background-repeat':'no-repeat', 'background-position':'center center'}); });