Repeating background using CSS Sprites?

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.

[Join us @ facebook]

I don't think it is possible. But anyway an extra request for the background is not that bad, right?

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

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

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/

[Guest]

[35.594]

Yahoo crawler, Googlebot, Gigabot