How To Use Sprite Images In CSS

Posted By : Mandeep Kundu | 20-Mar-2015

html5

What is sprite images ?

An sprite images is a collection of multiple images use in a single image. Multiple images take a long time to generate server requests in a web-page. Sprite image helps in reducing the server requests.

Here is an example explaining the usage of Sprite Image:-

In a web-page you have multiple images, to be rendered each time when that web-page is requested. Instead of rendering those multiple images at once, you can add those images into one.

CSS Example:-

 .navbar{
	width:100%;
}
.navbar-nav li{
	float:left;
	list-style:none;
	margin:30px;
}
.golf, .cycling, .running, .tennis, .swimming{
	background-image:url(../images/Background.png);
	width:50px;
	height:50px;
 }
.golf{
	background-position:0px 0px;
 }
.cycling{
	background-position:-50px 0px;
 }
.running{
	background-position:-100px 0px;
 }
.tennis{
	background-position:-150px 0px;
 }
.swimming{
	background-position:-200px 0px;
 }