CSS image sprites

the css sprites allow you to create a single file that contains all the images laid out in a grid,

requiring only a single image and only a single server call.

css sprites decrease the loading time of images on your web pages, and can significantly lower the number of requests that your website makes which can drastically lower total page load time.

it must always have a width, height, and background-position.


using image sprites  - create a navigation bar

we  use the sprite image (url('\\project\\images\\sprite1.gif') ) to create a navigation bar.

next we create complete our css code.

use this sprite image

css image sprites exampmle

     <html>
     
          <head>
          
             <title>this is css  image sprite example </title>
             
           <style type="type/css">
           
           .topContainer{ 
           
              width:487px ;
              
              height:52px ;
              
              position:relative ;
              
           } 
           
           #navContainer{ 
           
               width:487px ;
               
               height:52px ;
                
               position:absolute ;
               
               top:0px ;
               
               margin:0px 0px ;
               
               padding::0px 0px ;
               
        }
         
          #navContainer li { 
            
                list-style:none ;                
           
                display:inline ;                
           }
           
           #navContainer li a  { 
           
                height:52px ;
                
                float:left ;
         }
           #navContainer li#navBarHome  a { 
           
           width:126px ;
           
           background:url('\\project\\images\\sprite1.gif') no-repeat 0 0 ;
           
         } 
           #navContainer li#navBarService  a { 
           
                 width:179px ;
                 
                 background:url('\\project\\images\\sprite1.gif') no-repeat -126px  0 ;
        } 
           #navContainer li#navBarAbout  a { 
           
                 width:182px ;
                 
                 background:url('\\project\\images\\sprite1.gif') no-repeat 309px 0 ;
        }
          
   </style>
   
  </head>
  
  <body>
  
           <div  class="topContainer >
           
           <ul  id=navContainer>
           
           <li  id=navBarHome  <a  href="http://www.google.com"> </a> </li>
           
           <li  id=navBarService  <a  href="http://www.facebook.com"> </a> </li>
           
           <li  id=navBarHome  <a  href="http://www.yahoo.com"> </a> </li>
           
           </ul>
           
     </div>
   
 </body>
 
</html>

image sprites hover effects

the css code for hover effects

</style>
     
           #navContainer li#navBarHome  a:hover { 
           
               width:126px ;
               
              background:url('/project/images/sprite1hover.gif') no-repeat 0 -32 ;               
      } 
           #navContainer li#navBarService  a:hover { 
           
                width:179px ;
                
   background:url('/images/sprite1hover.gif') no-repeat -40px  -55 ;
         } 
           #navContainer li#navBarAbout  a:hover { 
           
            width:182px ;
            
   background:url('/images/sprite1hover.gif') no-repeat -100px -76 ;
      }
      
</style>