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.
+1
A:
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.
meagar
2010-10-26 15:11:44
Here is my without any critical thinking immediate response. Will this work with sprites of odd widths as well?
Jason Tabler
2010-10-26 15:25:53
All the sprites have to be the same width, otherwise you'll have strips of blank space between them when they're repeated. This shouldn't be a problem if the sprites are meant to tile horizontally anyways...
meagar
2010-10-26 16:17:29
I was thinking about using radial gradients, but I guess they will have to be linear. So, really, you can get away with three sprites overall - all your static background images, a sprite for vertical linear gradients, and a sprite for horizontal linear gradients. Way cool. Thanks.
Jason Tabler
2010-10-26 16:22:13