How to create and use CSS Image Sprites

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 −


 Live Demo

<!DOCTYPE html>
<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;
<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>