Image Sprites Using CSS example
CSS Sprites is one of the technique which is used to reduce the page loading time and number of HTTP requests in a page. We can apply this CSS Sprites technique for background Images. for example if we use rich text editors we need to have images for bold icon, italic icon, Underline tag, link and smiles and more. If each icon is in separate image then totally we must have about ten to twenty images which lead to increase in HTTP request and bandwidth. By using CSS Sprites technique we can make all image into one.
Example for CSS Sprites
Here I'm going to use the below Image for three div tags
Source code
<style>
div #delete{
background: url('http://nscraps.com/image_post/CSS-Sprites.png');
background-position: -0px -0px;
width: 18px; height: 18px
}
div #edit{
background: url('http://nscraps.com/image_post/CSS-Sprites.png');
background-position: -0px -28px;
width: 20px; height: 20px;
}
div #add{
background: url('http://nscraps.com/image_post/CSS-Sprites.png');
background-position: -0px -58px;
width: 24px; height: 24px
}
</style>
Delete Icon:
<div id="delete"></div><br />
Edit Icon:
<div id="edit"></div><br />
Add Icon:
<div id="add"></div><br />
Output:
Delete Icon:
Edit Icon:
Add Icon:
