Image cut-outs(css style) to make icon display

I am on the development side only when it comes to web portals and all, but many of time i have been asked to do some adjustment in CSS (which i feel undesirable, as i am not even OK in it) and some time these web browser behave in a naughty way

So to the issue to tackle is : How to use small images in icons as small icons are sometimes not loaded in IE (you have to pre load them and things like that in javascript)

and the answer is hidden in CSS (i recently came to know about it and implemented my self)

well for this the prerequisites is to have a images with many small icons inside it like this

and a css style class with something like

.icons {

background-image:url(/images/icon_collection.png);

background-repeat:no-repeat;

display:block;

height:18px;

margin-left:10px;

margin-right:6px;

width:18px;

}

.icon_one {

background-position:-156px -83px;

}

and apply it on div like this

<div class="icons icon_one"> </div>

so that can give result like this ...

point to note is

background-position:x-pos y-pos;

:) happy cssing