Get icon from single png image

css, css-sprites, html

Solution

That is called CSS sprites. It is used to cut down the http requests. Basically all icons are placed on a single canvas and are used as `background-image` property and later they are mapped using CSS `background-position` property, so for example

.icon1 {
   background-image: url('YOUR_URL_HERE');
   background-position: 10px 10px; /* X and Y */
   height: 30px;
   width: 30px;
}

Demo

So inshort just define a fix height/width to your element, and than map the canvas using `background-position` property. Hence, if you have 100 small icon images on a page, it will make 100 requests to the server, thus to increase the performance, CSS Sprites are used.

Problem

I have seen this so many times until now, but I never used myself. Can somebody explain how you can get specific icon picture from this single png image, for example the icons i selected with red ... using css

Original source