CSS Sprites

A sprite is multiple graphics compiled into one image.

CSS sprites technique is a way to reduce the number of HTTP requests made for image resources, by combining images in a single file. Using the image sprites instead of separate images will reduce the number of HTTP requests a browser makes to the server, which means less download time for the user and less bandwidth consumption.


I’ve started with two Firefox logos which are both 128×128. The next step is to combine them into a single image which will be our sprite.

The simple way to do this is by using a CSS Sprites Generator. After combining the two images download and save them.

After this we will simply add our CSS code to the CSS file, and our HTML code to the page. What if it does not look right? The CSS code may need to be altered a bit to compensate for the amount of padding added to the sprite. Note the padding and -subtract it.


Below is the working sprite ‘just touch it’ and the codes to get it going. Be sure to change the link and title.

HTML CODE

<a id=”logo-fire” title=”This Is A Sprite !” href=”http://weloveshon.com/image-sprite/” target=”_self”></a>

CSS CODE

#logo-fire
{ width:128px; height:128px; text-decoration:none; display:block; background-image:url(/i-west/Firefox-3.png); background-position: background-position: 0px 0px;}
#logo-fire:hover,#logo-link:active { background-position: 0px -138px; }


Posted In Shon 2.0