CSS Sprites Repeating Images

Question

Hi,

I was wondering if there is any way to use just one image for repeating and non-repeating images using css sprites. So in this case I would like to combine all the images on a page no matter what width and height and if they will be used as repeating or non-repeating images. I know the standard is to create 1 image using all the non-repeating images and another image using all the repeating images. But i just wanted to know if i could just use 1 image for everything.

Thanks.

Answer 1

The short answer is "no".

The explanation is that repeating images are displayed in their entirety in whatever direction they repeat. So, a background that is set to repeat-x will show all image content in the horizontal direction. This is why you can't repeat in both directions simultaneously using sprites.

Answer 2

I know the standard is to create 1 image using all the non-repeating images and another image using all the repeating images.

I think you are mistaken. It's impossible to selectively tile a segment of an image. You can only tile an image in its entirety. Thus, all repeating images must live in their own image files.

Answer 3

@Ryan Kinal is right when saying in his answer that a sprite image can't be used for repeating background images (in both directions).

There is still a way to do it cross-browser with only one or two files (not images), but it isn't that simple and should prove complicated to modify (though sprites are also complicated to modify, but at least it's visual!).

• data: base64 encoding for modern browsers and IE8+
• MHTML for IE7 and below (see comments for IE7 on Vista), rediscovered or translated by Stoyan Stefanov

As stated in the PHPIED article, the inline images are repeated twice but with the help of 3 conditional comments you can aim IE7 and below with the MHTML file, IE8 and above with the data: base 64 file and !IE with the same data file.

You end up with 5 different files on your server and 4 downloaded by any given browser:

• an image with no-repeat-ing sprites
• an image with repeat-x-ing sprites
• an image with repeat-y-ing sprites
• a file for MHTML (should be served to IE7 and below) background-images
• a file for the same repeating background images but data encoded for IE8+ and !IE browsers

Large repeating images shouldn't be encoded as filesize could increase a lot, your design may vary.

Answer 4

Unfortunately you can't force both kinds of images to work on same sprite. Usually repeating image is a little part of a larger image (gradient) that could be repeated in order to save on loading time and size. You can repeat images horizontally, vertically and both.
'repeat-x', 'repeat-y' or just 'repeat' for both. For non repeating images on the sprite you need to indicate scroll coordinates such as scroll 60px -20px (60px is left coordinate and -20px is top coordinate).