How would one tile the repeating backgrounds on this sprite?

It appears Amazon uses (used) a sprite with static backgrounds as well as tiled, but they're mixed in which appears to be no structured position. Generally my understanding is if you want to repeat-x on a sprite with static backgrounds, they all need to be the same width, or at least the width of the repea开发者_运维问答ting image has to be 100% the width of the sprite canvas.

This sprite from Amazon: http://farm4.static.flickr.com/3320/3217540317_0f0ffb778d.jpg

Lower right region as those gradients that are begging to be repeat-x.

I can't figure it out. Ideas?

--Sean

Barring the use of Javascript (which I can't envision providing an easy solution,) I don't believe it's possible to do what you're asking about (ie. repeating only a portion of a complex sprite for an element's background.)

I looked around the Amazon site, and I couldn't see those "gradients" being used. It's entirely possible they're "spacer" graphics, or color information stored within the sprite for future image modifications.

...

It would be a cool feature to implement though...sprite backgrounds, with coordinates outlining the tileable area.

As far as I know I don't think you can using that sprite.

You can use sprites to create a repeating background but the sprite has to work with background-repeat. So if you want a repeat-x then is has to be a vertical sprite and a horizontal sprite for repeat-y (or the other way around. I always get confused with them).