How to make a single image, treated as three different images?

Question

I was just going through a website code, and I saw an image for Social Networks link

Answer 1

You can set the background image position and crop it by setting width/height in the css file.

//HTML

//CSS

.facebook{
    background:url(http://i.stack.imgur.com/LNPd7.png) 0px 0px no-repeat;
    width:30px;
    height:30px;
}
.facebook:hover{
    background:url(http://i.stack.imgur.com/LNPd7.png) 0px -30px no-repeat;
}

.twitter{
    background:url(http://i.stack.imgur.com/LNPd7.png) -30px 0px no-repeat;
    width:30px;
    height:30px;
}
.twitter:hover{
    background:url(http://i.stack.imgur.com/LNPd7.png) -30px -30px no-repeat;
}

.linkedin{
    background:url(http://i.stack.imgur.com/LNPd7.png) -60px 0px no-repeat;
    width:30px;
    height:30px;
}
.linkedin:hover{
    background:url(http://i.stack.imgur.com/LNPd7.png) -60px -30px no-repeat;
}

Here is the working example http://jsfiddle.net/kayadiker/uuKzQ/