Sublime directory Surf the web anonymous Pagerank Monitor


Repeating background using CSS Sprites?

CFarrow
Fri 29 February 2008, 01:16 pm GMT +0100
I've only recently discovered the wonders of using CSS Sprites to increase page download speed by making fewer HTTP requests.

Read about it here:
http://www.fiftyfoureleven.com/weblog/web-development/css/css-sprites-images-optimization

It is a great technique that makes a very noticable improvement in speed.

My question is: Does anyone know of a way of using this technique with background images you need to repeat. I've tried everything I can think of and can't get it to happen.


Nikolas
Fri 29 February 2008, 02:09 pm GMT +0100
I don't think it is possible. But anyway an extra request for the background is not that bad, right? :)

CFarrow
Fri 29 February 2008, 02:23 pm GMT +0100
Well one bg image wouldn't matter so much, but if you're using a few different bg images it really starts to add up.

It seems like there should be a way - but can't for the life of me get it to work :(

GiorgosK
Sun 2 March 2008, 01:06 am GMT +0100
what do you mean have one actual .jpg for lets say 3-4 background images ?
well I don't think there is a way to hide parts of an image other then
the containing element's width and height, thus I agree with Nikolas
don't think its possible

CFarrow
Sun 2 March 2008, 07:14 pm GMT +0100
The idea is to combine all of the images you use on the majority of your pages into one image file - usually a .gif - and then define various positions of that image with css to display the different images.

Here is another example - this time showing how Yahoo and AOL use this technique on their portals.
http://www.websiteoptimization.com/speed/tweak/css-sprites/

Archive for SMF v1.00 by N.P. Valid XHTML 1.0 Transitional