Image spirting using HTML AND CSS
Image Spirting:
The concept of merging all the static images to form a single image,
through the background-position property, we show only the required image is called
as image spriting.
Through image spriting, we increase the performance of the page by loading
all the static images are in a single column.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example of Image_Spriting</title>
<style type="text/css">
.mainBorders {
border: 2px solid;
padding: 5px;
margin: 2px;
}
.allImages {
border: 2px solid;
width: 70px;
height: 60px;
background-image: url("images/fullimages.jpg");
}
.Person1 {
background-position: 222px -9px;
}
.Person2 {
background-position: 432px -45px;
}
</style>
</head>
<body>
<h3 style="border: 3px solid; text-align: center;">List of workers</h3>
<div class="mainBorders">
<div>Name:ram</div>
<div>Designation: Front End Developer</div>
<div>place: Hyderabad</div>
<div class="allImages Person1"></div>
</div>
<div class="mainBorders">
<div>Name: Vivek</div>
<div>Designation: Front End Developer</div>
<div>place: Hyderabad</div>
<div class="allImages Person2"></div>
</div>
</body>
</html>
Note:
Image spriting is only recommended for static web pages but not for
dynamic web pages.