An image sprite is a collection of images put into a single image.
A web page with many images can take a long time to load and generates multiple server requests.
Using image sprites will reduce the number of server requests and save bandwidth.
Its pretty simple..
background: url(img_navsprites.gif) 0 0;// if this wont work you can try background-image:url(); and background-position : x & y axis
Just specify width and height of an image you are willing to place and then in background provide the image url with x & y position. Thats it.
People think its complicate..it is complicate as we think like that..in reality its simple..for more you can browse w3schools.