Is it possible to hide the specific area of a CSS background sprite image using clip?

Question

Is it possible to hide the specific area of a CSS background image using clip? for example I have multiple icons on image but I want to show only one icon. Because area of Div is greater then the icon size so other unneeded icons are also showing. Can I hide them without making another image for that single icon?

Jsfiddle http://jsfiddle.net/jitendravyas/FyMW6/1/

Answer 1

Basically you create a container for each image which you use to dictate the area of the image.

http://jsfiddle.net/FyMW6/4/

HTML:

<div class="button">
    <div class="text">Lorem ipsum dolor sit amet</div>  
    <div id="house" class="icons"></div>
</div>

CSS:

.button {     
    width: 300px;
    float: left;
    border:1px solid red
}

.text {
    float: left;
    width: 245px;
}

.icons {
    background-image: url("http://www.smtusa.com/uploads/cssexample.jpg");
    background-repeat: no-repeat;

    width: 50px;
    height: 50px;
    float: right;
}

#house {
    background-position: -56px -45px;
}

#gear {
    background-position: -56px -106px;
}