CSS Sprite for images which have vertical as well as horizontal repeats

Question

I have four images, one of which has background repeat property in horizontal direction and three of which have background repeat in vertical direction.

I have different CSS classes which currently uses this images as under:

.sb_header_dropdown {
     background: url(images/shopping_dropdown_bg.gif) repeat-y top left;
     padding: 8px 3px 8px 15px;
 }


 .shopping_basket_dropdown .sb_body {
     background: url(images/shopping_dropdown_body_bg.png) repeat-y top left;
     margin: 0;
     padding: 5px 9px 5px 8px;
     position: relative;
     z-index: 99999;
 }


 .checkout_cart .co_header_left {
     background: url(images/bg.gif) repeat-x 0 -150px;
     overflow: hidden;
     padding-left: 3px;
 }

 .sb_dropdown_footer {
     background: url(images/shopping_dropdown_footer_bg.png) repeat-y top left;
     clear: both;
     height: 7px;
     font-size: 0;
 }

So here am making 4 HTTP Request and I want to implement CSS Sprite for all 4 images such that I can reduce the number of HTTP Request from 4 to 1, also thing to keep in mind is that here we have background repeat for all 4 images, either on x-direction or on y-direction and so how should sprite be created and how it can be used in the CSS to reduce the number of HTTP request.

I hope this question is clear.

Answer 1

You'd have to manually repeat the sprites in the image to be so long as to not require actual automated CSS repetition.

[1][2]\      [3][%][%][%][%][%][%][%][%]
[%][%] |     [4][%][%][%][%][%][%][%][%]
[%][%] |     \_________________________/
[%][%] |              | (horizontal)
[%][%] |— maximum likely dimension of element
[%][%] | (vertical)
[%][%] |
[%][%] |
[%][%]/

This may or may not be particularly worthwhile depending primarily on how large the image will need to be.

Answer 2

A CSS Spritemap (a sprite only refers to 1 image within the spritemap) is not the holy grail of all things. You should not try to stuff ALL your images in one, and this is a nice example of when not to, because you're going to end up with a huge spritemap image, while performance wise a smaller second image (whilst adding another request, I'm assuming you send the correct cache headers) is the faster, easier, and lighter option.

Answer 3

You can only use sprites for images that repeat in the same direction. This is because there is no way to limit the repeatable area through CSS, so if you're repeating horizontally there can't be any other images placed along the horizontal axis of the section you want repeated or they will be included in the repeat. So, pages that have backgrounds repeated in multiple directions will be able to be reduced to no less than 2 HTTP requests for background images.

You can create two files: a sprite_repeaty.png and a sprite_repeatx.png. All of your backgrounds with repeat-y can be placed along the top edge of sprite_repeaty.png. All of your backgrounds with repeat-x (only one for now, but you can set it up for later) can be placed along the left edge of sprite_repeatx.png. If you have icons or backgrounds that aren't repeated they can be included in either of these files.

Sprites are easier to maintain if you place the images at regular intervals so that you don't have to check the file when applying position, you can simply set background-position:0 0;, background-position:0 -100px;, background-position:0 -200px;, etc, depending on the scale you choose.