CSS repeating background, sprite or 1px png

Question

Ok I want to know what is the best practice for performance regarding CSS background images and http requests.

1. Use many different 1px png background images resulting in several individual http requests

OR

2. Use one large image sprite with big gradient block chunks for use as background image. This will increase file size but save on http requests.

Love to hear you opinions...

Answer 1

I think it would be better to use data:uri technique for small images (like 1px-backgrounds).

background: url(data:image/png;base64,....) top left repeat-x;

It works for all modern browsers. For old IE browsers (like IE6, IE7) you can overwrite styles by conditional comments.

background: url("path/to/background.png") top left repeat-x;

Of course this way you have to re-encode background, if it has changed. But it saves a lot of requests.