Post
Ask Question

CSS Image Sprites

Introduction

 
Using image sprites you can divide the portion of one image into other small images. Every single image works standalone. In simple terms, you can say one image is a collection of other small images.
 
The main benefit of using image sprites is that it reduces the HTTP request and size of an image (see the following figures).
 
If your web page has many images then it will take more time to load your web page on the server and also generate multiple HTTP requests. But when image sprites are used it take less time to load page as well as take less time to generate HTTP server requests.
 
image sprites        image sprites
image sprites
image sprites
image sprites
image sprites
 
image sprites image sprites
 
Code:
 
HTMLPage.htm
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <link href="StyleSheet.css" rel="stylesheet" type="text/css" />  
  5.     <title></title>  
  6. </head>  
  7. <body>  
  8.     <div class="firstmain">  
  9.         <ul id="FirstUL">  
  10.             <li id="first"><a href="white.htm"></a></li>  
  11.             <li>  
  12.                 <div id="second">  
  13.                     <a href="blue.htm"></a>  
  14.                 </div>  
  15.             </li>  
  16.              
  17.         </ul>  
  18.         <ul id="SecondUL">  
  19.         <li id="third"><a href="red.htm"></a></li>  
  20.         <li id="forth"><a href=yellow.htm></a></li>  
  21.         </ul>  
  22.     </div>  
  23.      <div class="secondmain" >  
  24.         <a class="fifth" href="green.htm"></a>  
  25.     </div>  
  26. </body>  
  27. </html>  
StyleSheet.css
  1. #FirstUL  
  2. {  
  3.     margin: 0;  
  4.     padding: 0;  
  5.     width: 450px;  
  6.     float: left;  
  7.     height: 160px;  
  8. }  
  9. #FirstUL ul  
  10. {  
  11.     list-style: none;  
  12.     margin: 0;  
  13.     padding: 0;  
  14. }  
  15. #FirstUL li  
  16. {  
  17.     padding: 0;  
  18.     margin: 0;  
  19.     float: left;  
  20.     list-style: none;  
  21.     top: 0;  
  22.     list-style: none;  
  23. }  
  24. #FirstUL a  
  25. {  
  26.     height: 157px;  
  27.     width: 157;  
  28.     display: block;  
  29. }  
  30. #first  
  31. {  
  32.     background-image: url('image/all balls.jpg');  
  33.     background-position: 0 0;  
  34.     background-repeat: no-repeat;  
  35.     width: 157px;  
  36.     height: 157px;  
  37. }  
  38. #second  
  39. {  
  40.     margin-left: 29px;  
  41.     background-image: url('image/all balls.jpg');  
  42.     background-position: -184px 0;  
  43.     background-repeat: no-repeat;  
  44.     width: 157px;  
  45.     height: 157px;  
  46. }  
  47. #SecondUL  
  48. {  
  49.     margin: 0;  
  50.     padding: 0;  
  51.     width: 850px;  
  52.     float: left;  
  53.     margin-top: 154px;  
  54.     margin-left: -420px;  
  55.     height: 157px;  
  56. }  
  57. #SecondUL ul  
  58. {  
  59.     list-style: none;  
  60.     margin: 0;  
  61.     padding: 0;  
  62. }  
  63. #SecondUL li  
  64. {  
  65.     padding: 0;  
  66.     margin-right: 100PX;  
  67.     height: 160PX;  
  68.     float: left;  
  69.     list-style: none;  
  70.     top: 0;  
  71.     list-style: none;  
  72. }  
  73. #SecondUL a  
  74. {  
  75.     height: 157px;  
  76.     width: 157px;  
  77.     display: block;  
  78. }  
  79. #third  
  80. {  
  81.     margin-left: 29px;  
  82.     margin-top: 20PX;  
  83.     background-image: url('image/all%20balls.jpg');  
  84.     background-position: -9px -174px;  
  85.     background-repeat: no-repeat;  
  86.     width: 157px;  
  87.     height: 157px;  
  88. }  
  89. #forth  
  90. {  
  91.     background-image: url('image/all balls.jpg');  
  92.     background-position: -293px -152px;  
  93.     background-repeat: no-repeat;  
  94.     width: 157px;  
  95.     height: 157px;  
  96. }  
  97. .firstmain  
  98. {  
  99.     margin: 0px;  
  100.     padding: 0px;  
  101.     height: 330px;  
  102.     width: 900px;  
  103. }  
  104. .fifth  
  105. {  
  106.     background-image: url('image/all%20balls.jpg');  
  107.     background-position: -164px -290px;  
  108.     background-repeat: no-repeat;  
  109.     padding: 0px;  
  110.     width: 157px;  
  111.     height: 157px;  
  112. }  
  113. .secondmain  
  114. {  
  115.     margin-left: 200px;  
  116.     margin-top: -27px;  
  117.     width: 157px;  
  118.     height: 157px;  
  119. }  
  120. .secondmain a  
  121. {  
  122.     margin: 0px;  
  123.     padding: 0px;  
  124.     height: 157px;  
  125.     width: 157;  
  126.     display: block;  
  127. } 
Output
 
Internet Explorer
 
image sprites
 
Chrome
  
image sprites
 
Fire Fox
 
CSS-image.gif
 
Safari
 
image sprites
 
When you click on the red ball you will be navigated to the Red.htm page.
 
Output
 
image sprites


Similar Articles