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

This is CSS Sprite. Refer to article to make it happen.

Answer 2

@ Zeeshan; it's called sprite
check this article for more http://css-tricks.com/158-css-sprites/

check this example http://jsfiddle.net/sandeep/F4wpW/

Answer 3

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

//HTML

<ul class="social-icons">
    <li class="facebook">
        <a title="Facebook" href="http://facebook.com/eclyptix"><img src="http://www.killersites.com/killerSites/resources/dot_clear.gif" width="30px"></a>
    </li>
    <li class="twitter">
        <a title="Twitter" href="http://twitter.com/eclyptix"><img src="http://www.killersites.com/killerSites/resources/dot_clear.gif" width="30px"></a>
    </li>
    <li class="linkedin">
        <a title="LinkedIn" href="http://linkedin.com/company/eclyptix"><img src="http://www.killersites.com/killerSites/resources/dot_clear.gif" width="30px"></a>
    </li> </ul>

//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/