what is sprite technology in css

i want to kn开发者_JAVA技巧ow about sprite technology used in css regarding fast accessing of the web pages.

They are cool because you can minimize http requests with them and make your page's performance improve. They are considered good in terms of SEO as well. Check out this for more info:

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

This page gives a pretty good overview.

Essentially it puts all of the page's images into one large image file and then uses CSS to display only parts of that file (to give the effect of multiple images). This has the advantage of only requiring the browser to make one request for all the images rather than a bunch of individual requests (each of which has an overhead).

If you have the group of icons for example , you are creating one jpg or png file and adding the images one after another. Then you just creating the backgrounds based on only one image and fixing it in percentage / pixels view. It makes your code organized and saves images loading time . For example , you have a window and it has close , unfold icon. You can create a png file named windowControlSprite.png that contains two icons one after another , then you can create properties in your css to this element. #somediv {background-position:0px -20px;}

Also, you can find CSS sprite X and Y easily with tools like http://www.getspritexy.com/

Otherwise you need to use image editors like Photoshop or use Firebug to find X and Y coordinates.