CSS Sprites

Now a days CSS Sprite plays a major role in developing a web page. One of the techniques developed, sprites being plugged into a master grid, then later pulled out as needed by code that mapped the position of each individual graphic and displayed it on the screen. First of all you need to know how to make a transparent gif image with positions using Photoshop.

Sprites were displayed over a static or dynamic background image, and the positioning of the sprite was controlled simply by the css background positions. To display a single image from the master image, one would use the background-position property in CSS, defining the exact position of the image to be displayed. Any hover, active or focus effects would be implemented using the simple definition of the background-position property for the displayed element.

When a page is loaded, it will load as a single images which is highly useful in reducing the request time of the server. YAHOO, GOOGLE, DIGG, SULEKHA etc... are also using sprite images inorder to load their pages faster.

For example:
You can see the GOOGLE sprite images, how it was created and called using css bacground.