Using CSS Sprite in Web Pages

Home | Suggest a New Category | New User? Register Here | Already registered? Login Here | Ask Zed-Axis Team

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
<html>
<head>
<title>CSS Sprite</title>
<style>
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; }
</style>
</head>
<body>
<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>
</div>
</body>
</html>

Reader's Comments


Tanguy
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
Name:*

Email Address:*


Website/Blog URL:


Comments:*
Security Code:*



Note: Comment Moderation has been enabled. Kindly bear with us till the blog administrator approves them to be published.


Copyright © 2009 Zed-Axis Technologies		News \| Zed-Axis Global \| Partnership Opportunities \| Privacy \| Contact Us