Question

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 searching. My own experimentation hasn’t had good results.

Answer 1

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.