CODEWITHSUNDEEP
htmlcssbackground
ravenik
ravenik

Reputation: 852

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

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:

enter image description here

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)

Upvotes: 1

Views: 485

Answers (2)

Clyde Lobo
Clyde Lobo

Reputation: 9174

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

Upvotes: 1

Sudip
Sudip

Reputation: 2051

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.

Upvotes: 0

Related Questions