Using CSS Sprite in Web Pages
Posted on:  Sep 18, 2008
A CSS sprite is a technique to create a single image file that contains all the images laid out in a grid, requiring only a single image and only a single server call. It is a technique to decrease the number of HTTP requests made for image resources referenced by our site. It can be very effective for improving website performance, particularly in situations where many small images, such as menu icons, are used. CSS property “ background-position” can be used to shift the visible area of the combined image. This technique has also been used on the Yahoo! home page.

Using CSS sprites can reduce the delay for certain events on web pages and making our website perform more efficiently and improving our visitor’s experience. On large sites, every little server call matters. This is one way to reduce server calls while maintaining separation of content from presentation, accessibility, and graceful degradation. Using CSS sprites takes a little extra care and planning. We have to keep track of the pixel position of each sprite, but that’s not much harder than keeping track of the paths for the individual image files this single file will replace.

Adding CSS Sprite in html page
<title>CSS Sprite</title>
a#top-left { background: url(’vikas_sprite.gif’) 0px 0px no-repeat; }
a#top-left:hover { background: url(’vikas_sprite.gif’) 0px -210px no-repeat; }
a#top-left:visited { background: url(’vikas_sprite.gif’) 0px -210px no-repeat; }

a#top-right {background: url(’vikas_sprite.gif’) -130px 0px no-repeat; }
a#top-right:hover { background: url(’vikas_sprite.gif’) -130px -210px no-repeat; }
a#top-right:visited { background: url(’vikas_sprite.gif’) -130px -210px no-repeat; }

a#bottom-left {background: url(’vikas_sprite.gif’) 0px -105px no-repeat; }
a#bottom-left:hover { background: url(’vikas_sprite.gif’) -0px -315px no-repeat; }
a#bottom-left:visited { background: url(’vikas_sprite.gif’) -0px -315px no-repeat; }

a#bottom-right {background: url(’vikas_sprite.gif’) -130px -105px no-repeat; }
a#bottom-right:hover { background: url(’vikas_sprite.gif’) -130px -315px no-repeat; }
a#bottom-right:visited { background: url(’vikas_sprite.gif’) -130px -315px no-repeat; }
<div id=”mysprites”>
<a id=”top-left” href=”#”></a>
<a id=”top-right” href=”#”></a>
<a id=”bottom-left” href=”#”></a>
<a id=”bottom-right” href=”#”></a>

   AddThis Feed Button
Reader's Comments
 Nov 12, 2010 at 18:53 PM
OK, I do understand better how it works. But some people use background position is there anything related to it ?
Post your comment
(*) marked fields are mandatory
Email Address:*
Website/Blog URL:

Security Code:*
Note: Comment Moderation has been enabled. Kindly bear with us till the blog administrator approves them to be published.
Follow us on Facebook Follow us on TwitterRSS Feed LinkedIn
 Recent Posts
Need for Channel Sales and Distribution Management System
Growing demand for Secondary Sales Trend Analysis amongst FMCG and similar companies
How well are you Leveraging Technology for Collaborating with Your Distribution Partners?
AddThis Feed Button
Zed-Axis BlogSubscribe to Zed-Axis Newsletter
 Take our opinion Poll
 Media Updates
 Press Releases
February 2018
January 2018
December 2017
November 2017
October 2017
September 2017
August 2017
July 2017
June 2017
May 2017
April 2017