Can I not use CSS sprite for a background image??

Dev Shed Forums Sponsor:

March 11th, 2013, 02:18 AM

Ihatephp

Contributing User

Join Date: Oct 2012

Posts: 54

Time spent in forums: 10 h 32 m 59 sec
Warnings Level: 1
Reputation Power: 1

Can I not use CSS sprite for a background image??

Hi there.

I'm trying to use CSS sprite for the first time to lighten the page load and have this question.

I know I was supposed to use CSS sprite for images like small icons, navigation's button image, link buttons and other "small" images that you may see on a website.
But can I not use CSS sprite technique for one big 1280*1024 type of background(or wallpaper) image because I was thinking that is the biggest image that should delay loading process the most?
I would like to get this guys included in the sprite map so that browsers don't have to send request for the biggest image on the whole entire site.

Thank you

March 11th, 2013, 01:12 PM

E-Oreo

Lost in code

Join Date: Dec 2004

Posts: 7,931

Folding Points: 945 Folding Title: Novice Folder

Time spent in forums: 2 Months 7 h 48 m 54 sec
Reputation Power: 7053

I believe the answer is no unless there are some newer CSS techniques for handling images that I'm not aware of. If the container for the image is larger than the image, then you can't put it into a sprite. Since this is true of the <body>, you can't. If you put the background image into something like a <div> instead, then you could potentially put it into a sprite as long as it doesn't repeat.

Using a sprite doesn't speed up the load time of big images; the image data takes the same amount of time to transfer regardless. What a sprite does is reduce the number of HTTP requests. This is most effective at reducing the load time for small images, because the HTTP request for a small image represents a substantial part of the time required to retrieve the image, whereas for a large image the HTTP request does not represent a substantial part of the time required to retrieve the image.

__________________
PHP FAQ
How to program a basic, secure login system using PHP

Quote:

Originally Posted by Spad

Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around

March 12th, 2013, 12:29 AM