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