How to Use CSS Sprites in your Code

CSS Sprites

CSS sprites system is an approach to diminish the quantity of HTTP asks for made for picture assets, by joining pictures in a solitary record.

What is a CSS Sprite 

Sprites are two-dimensional pictures which are comprised of joining little pictures into one bigger picture at characterized X and Y arranges. 

To show a solitary picture from the joined picture, you could utilize the CSS foundation position property, characterizing the correct position of the picture to be shown. 

Favorable position of Using CSS Image Sprite 

A website page with numerous pictures, especially numerous little pictures, for example, symbols, catches, and so forth can set aside a long opportunity to stack and creates different server demands. 

Utilizing the picture sprites rather than independent pictures will altogether lessen the quantity of HTTP asks for a program makes to the server, which can be exceptionally powerful to enhance the stacking time of website pages and in general webpage execution. 

Check out the accompanying precedents and you will see one obvious distinction; when you put the mouse pointer over the program symbols in non-sprite form out of the blue the drift picture will show up after some time, it happens on the grounds that the floating picture is stacked from the server on mouse float, since the typical and float pictures are two unique pictures. 

While in sprite variant, since all pictures are consolidated in a solitary picture the floating picture is shown promptly on mouse drift that outcomes in smooth drift impact. 

Making the Image Sprite 

We made this sprite picture by joining 10 separate pictures in a solitary picture (mySprite.png). You can make your very own sprite utilizing any picture altering instrument you like. 

Show an Icon from Image Sprite 

At last, using CSS, we can show only the piece of a picture sprite we require. 

As a matter of first importance, we will make the class .sprite that will stack our sprite picture. This is to evade redundancy since all things share a similar foundation picture.

CSS

.sprite {
    background: url("images/mySprite.png") no-repeat;
}

Presently, we should characterize a class for everything we need to show. For instance, to show Internet Explorer symbol shape the picture sprite the CSS code would be.

.img {
    width: 50px; /* Icon width */
    height: 50px; /* Icon height */
    display: inline-block; /* Display icon as inline block */
    background-position: 0 -200px; /* Icon background position in sprite */
}

Thanks,