CSS Sprites and repeating backgrounds

Question

I'd like to keep all my small images in one sprite file, for example:

Now suppose I want to add a thin background image which is meant to repeat-x over 100% the width of an element:

Does this have to be stored as a seperate entity, or can I somehow store it in the sprite image? I can't work out if it's possible to do a background-repeat over a section of a sprite, I think not but I'm fairly sure I've seen it done somewhere.

Answer 1

I’m not sure if this is in CSS3 already, but the Gecko engine (Firefox 4 …) adds image-rect as -moz-image-rect which allows you to select a specific part of an image for usage. With that you can select a part of your sprite as the background image and then repeat it.

It is definitely not wide-spread or standard yet though.

What I like to do is do 3 kinds of sprites. One with icons, where you don’t use repeats at all, one for horizontal-repeating images, and one for vertical-repeating images.

That way you can add several to be repeated backgrounds to one sprite but not have that much of a hassle using it.

Answer 2

You'd have to make it full width of the sprite image. Otherwise it could leak other images or blank space when being repeated.

Remeber that repeating really small background images (1-2px wide) can have terrible impact on performance - it's always better to use a bit larger images for that so even if it would be wee wide - it can actually be better page rendering wise then 1px wide one.

EDIT: (regarding your edit)

If your element is fixed height you can put it on your sprite width 100% width of the sprite with the required max-height of the element. Or if you know that its max width is smaller then the width of the sprite then make it a rectangle with the max width and height of your element.

If you dont know the max height and you want to put it at the very top so the gradient eases into a solid color it can be done if you put your repeated image at the very bottom of the sprite and position it with negative top value background-position: 0px -300px where 300px is the distance from the top of your sprite to the top of the background image on your sprite.

Look here how google positioned repeated BG on a sprite: