CSS sprites and gradients

Is it possible to put multiple repeating gradients on a single sprite master image? I've got about 5 1px X 400 px gradients that could be combined to reduce the page requests. It's pretty much my last place to go for reducing object requests. I haven't seen any techniques for this while sea开发者_开发技巧rching. My own experimentation hasn't had good results.

Assuming that all the areas you're applying the background gradients to are less than 400px high, you can tile the five sprites vertically to give you a single 1x4000px image.

You could apply the appropriate part of the sprite by specifying a vertical offset, and setting background-repeat:repeat-x.

The vertical offset would be 400 * (index of the sprite you want): 0px for the first, 400px for the 2nd, 800px for the 3rd, etc.