Sprite as a background image: how to display in bigger container? - html

Question

I need to use sprites as a background image for element type of <a> tag.
The problem is that I need to display only one part of the sprite (for example 17px x 17px) and container can be higher. In this case, instead one my background image and than empty space, I get image I wanted to have and under that next image (which I don't want to display).
Is there any way to limit the height and width of the square on sprite i would like to display? I cannot set just height and width for the whole <a> tag.
Example:
And what i would like to do is not displaying the part from second image which is on the same sprite (its' only example; in the project i display text in the whole line, so changing width is not a solution)

Answer 1

Set the height and width for the sprite
a {
display: block;
background: url(sprite.png) no-repeat;
height: 17px;
width: 17px;
}
EDIT : after OP put a screehshot
You will need to use the :before pseudo selector along with the content property
Build a demo at http://jsfiddle.net/SqbnC/
a:before{
background:url('http://pf.staticfil.es/hp/img/sprite2.png');
width: 22px ;
height: 22px;
display:inline-block;
content:"";
}
I have specified the height and width as 22px because that's the dimension of the icon that i show from the sprite

Answer 2

You should use background position in your css class.
As an example..
.classsample{
background:url('YOUR IMAGE PATH') no-repeat 0 -20px;
height:10px;
width:10px;
}
Update the value 0 and -20 based on your image portion which you wanted to show in the div. And finally you should not use IMG tag on your Anchor tag, you have to pass the image via CSS class as above.
<a class="classsample" href="#">TEXT</a>
Use padding if there are no text in the Anchor tag.