CSS Sprites

Here is an example of CSS Sprites

CSS Sprites enable us to reduce the loading time of web page by decreasing the number of HTTP requests.

Sprite is a big image compressing of number of small images.

When a web page is requested by the browser and if that page contains let say 5 images then the number of HTTP requests to the server will be 5 in addition.

Using css sprites we can combine these five images into one and we can show on the page this one image portion accordingly.

This is done by the CSS background-position property.

The example shows the use of CSS Sprites

In this example a combined image of all images of buttons of a music player is used to show the buttons.
If we separate all the images then there would be 8 images for all the buttons so 8 http requests will be there, that increase the loading time.

CSS Code:

HTML Code:

Here is the Preview :