CSS Sprites and repeating backgrounds

html css css-sprites
Tom Gullen picture Tom Gullen · Feb 19, 2011 · Viewed 8.5k times · Source

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

enter image description here

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

enter image description here

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

Kissaki picture Kissaki · Feb 19, 2011

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.

Related questions

use CSS sprites for list (<li>) background image

Is it possible to use CSS sprites for the list background image? Normally, I render my sprites with CSS like this: .sprite { background: url(sprite.png) no-repeat top left;} .sprite-checkmark { background-position: 0 -24px; width: 24px; height: 23px; } .sprite-comment { background-position: 0 -48…

Read More
Using sprites with IMG tag?

I understand how to use sprites, however, isn't a "src" attribute required for IMG tags? I could always use a SPAN or other tag and set the background/width/etc but it won't be semantically correct. Basically, I'd like to …

Read More
Why use a sprite sheet rather than individual images?

One thing I have noticed on some sites is that they use one BIIIIIIIG image containing lots of little images, then use CSS background-position to define the coordinates of each image, rather than use individual images. Here's where I'm at: …

Read More