How to create and use CSS Image Sprites

CSSWeb DevelopmentFront End Technology

CSS Image Sprite is a combined image file of all pictures in a document page. Image sprites come is useful as image resources will have to be loaded only once. Using the CSS background-position different parts of the combined image can be shown.

Let’s see an example for CSS Image Sprites −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sprite {
   background: url("Capture.png") no-repeat;
   width: 280px;
   height: 200px;
   display: inline-block;
}
.flag1 {
   background-position: 0px 0px;
}
.flag2 {
   background-position: -255px 0px;
}
.flag3 {
   background-position: -510px 0px;
}
.flag4 {
   background-position: -765px 0px;
}
body {
   text-align: center;
}
</style>
</head>
<body>
<div><h1>Flag Image Sprite</h1></div>
<div class="sprite flag1"></div>
<div class="sprite flag2"></div>
<div class="sprite flag3"></div>
<div class="sprite flag4"></div>
</body>
</html>

Output

raja
Published on 07-Jan-2020 10:07:13
Advertisements