Extrapolate background slice in css from sprite

Question

Sprites work well for small icons that don't change dimensions, but I tend to use a lot of 1px wide background slices for things like button and div backgrounds. Is there any way to include these slices into sprites? In order to do so, there must be a way to take a small piece from a sprite and extrapolate it over the entire background of the element, essentially cutting it from the sprite and letting it repeat as if it were a standalone background image.

Answer 1

It sounds like you are using 1px wide images for gradients. I'm guessing you want to repeat the image in only one direction, not both. If that's the case, you can make a sprite of 1px-wide images. The trick is to lay out your sprite according to which directions you will repeat the images. Also pay attention to if you will position them right or bottom, for example, if your gradient is supposed to go at the bottom of a container you probably want to position that gradient at the bottom of your sprite. If all your images repeat horizontally, you could lay out them single file with one on top of the other. I like to have some transparency between images, either to line them up with gridlines or to leave enough space so that the other images don't show.

In most browsers except old IE you can create the gradients though CSS without using any images. For old versions of IE you would have to use images.

Answer 2

If I understand you correctly, Miriam answer is the correct answer.

I'll just elaborate on Miriam's answer with a few examples.

Here is a CSS sprite of gradients to use buttons.

Use CSS background-position to target the specific gradient you want to use for specific buttons.

However gradients with images are outdated. For most gradients you can simply use CSS and IE-filters to accomplish the same result. Even pretty complex gradients can be made with CSS (IE will fallback to a standard "one color to one color" gradient. And if you really want that IE8 user to have the same view as modern browsers you can still use an image as a fallback.

Here is a great tool (photoshop-like) to create gradients and simply copy/paste the code it generates: http://www.colorzilla.com/gradient-editor/