CSS Sprites

 

CSS sprites technique is a used to reduce the number of HTTP requests & size of images made for image resources, by combining images in a single file.

What Is a Sprite?

Sprites are used to combined small image in a single large images at defined X and Y coordinates.
We can able to seperate each images from single images by using CSS background-position property, by defining the exact position of the image that are fit by giving position for a images to be displayed.

Advantage:

• Reduce the number of HTTP requests for a different images to load.
• Reduce loading time of web pages
• Improve site performance.

How to Create & Use CSS Image Sprite

Step 1: Making the sprite image

We made this sprite image by combining 10 separate images in a single image (mySprite.png). You can create your own sprite using any image editing tool you like.

Below are code just copy and paste in your file to see the css sprite background position.

HTML and CSS Code

Demo