CSS Image Sprites - get portion of an image

One of the great methods to load and work with icons in web pages is to load one image that is a collection of several icons and use any icon as needed, that reduces the number of server request and save bandwidth.

Image Sprites example:
I will use one of the Google images to illustrate how they get their icons as needed, Its a PNG image type and 182px × 225px dimensions.



Using DIV background:
To display some parts of the previous image I will create <div> elements for example, then try to customize their background image to display as we want, by any image editor we can determine the start point of the image part we want and its height and width.

1- First icon :

1 2 3 4 5

div.img1{ width:32px; height:32px; background:url(https://******/image.png) -130px -16px; }

1	<div class="img1"></div>

2- Second icon :

1 2 3 4 5

div.img2{ width:29px; height:27px; background:url(https://******/image.png) -35px -2px; }

1	<div class="img2"></div>

3- Third icon :

1 2 3 4 5

div.img3{ width:24px; height:19px; background:url(https://******/image.png) -142px -78px; }

1	<div class="img3"></div>

If this post was good and helpful for you, Please give it Like.

.