CSS Sprite for images which have vertical as well as horizontal repeats
- by Rachel
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.
