CSS Image Sprites

CSS to half of a character

Image sprite is nothing but a collection of images put into a single image. When web page loads then for a particular location we show particular position of a image. For multiple images it takes time to load on a server. That is why we use single image for multiple position to save bandwidth.

In the following example we will show how we can show one image into to parts using Image Sprites:

<!DOCTYPE html>
<html>
<head>
<style>
#img1{
width: 151px;
height: 400px;
background: url(sprite.png) 0 0;
}

#img2{
width: 151px;
height: 400px;
background: url(sprite.png) -148px 0;
}
</style>
</head>
<body>

<img id="img1" src="img_trans.gif"><br />
<img id="img2" src="img_trans.gif">

</body>
</html>

sprite2

You may like:  Horizontally center a div within a div using CSS style

Leave a Reply

Your email address will not be published. Required fields are marked *