Thread: What is CSS Sprites? How it works? How to use it?

I heard that CSS Spirits can help in decreasing the number of HTTP request thus improving the site load time. I tried searching and found lot of information about it... but it was difficult for me to understand (Since I am a newbie).

Can someone help in explaining what does CSS Spirits mean.. How can I use it (in simple steps) and how can I apply it to my website to decrease the load time?

Basically a CSS Sprit is several image files combined into one. Thus only using one HTTP request for all of the (design) images on your site. Once you combine your images you must specify in the CSS which section of the image to display.

Here is an example of CSS without sprites:

#nav li a {background:none no-repeat left center}#nav li a.item1 {background-image:url('../img/image1.gif')}
#nav li a:hover.item1 {background-image:url('../img/image1_over.gif')}
#nav li a.item2 {background-image:url('../img/image2.gif')}
#nav li a:hover.item2 {background-image:url('../img/image2_over.gif')}

and this is what it would look like with sprites:

#nav li a {background-image:url('../img/image_nav.gif')}#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}

ipxcore has answered this well, so I will just add that the thing which first made me aware of sprites and their usefulness by way of a practical example. When I was trying to create a menu with hover-over effects (the actual design was like a wooden fence swinging when you hovered - so it had to be images rather than just css effects). I found that using two separate images gave me a tiny moment where the image vanished on hover-over while it loaded - no matter how small I made the image. This was resolved by combining the two images, as discussed above. Just a little practical example.