0

I just strated working with sprites and end up with a diffrent result
My code
css

.icon a{
  width:191px;
  height:151px;
  text-decoration:none;
  text-indent:-9990px;
  display:block;
  background-image:url(../images/socialsprite.png);
  background-position:0 0;
}

html

<span class="icon">
    <a href="#">f</a>
    <a href="#">t</a>
    <a href="#">g</a>
    </span>

any help would be welomed Thank you

Attachments eresult.png 587.99 KB
3
Contributors
8
Replies
11
Views
5 Years
Discussion Span
Last Post by dany12
0

If you want for each anchor link to display a different image using one sprite, you have to target each element separately and when setting the background image use top, left to offset the position within the sprite image.

From the link I posted, they have a pretty good example to show how to show different parts of the sprite.

0

I had already seen the w3school idea my question is why I get 6 images when I have just 3?
I have uploaded my sprite

Attachments socialsprite.png 2.98 KB
0

Ok, so you are applying one sprite image to all of the links with no offset. In addition, you set a large value for the height and width. If you take a look at the example that the w3schools has on their site, you'll notice that they apply a different style to each link, then add an offset so that each link has a portion of the sprite's background.

In your example, you get six images due to the height of 151. Your image repeats itself within that height.

0

ok, I shall have a wild guess in this case. It maybe cause as the image have repeat itself as the width of the link is set wider than the image.
First solution is reduce the width of the link and another is to set the background-repeat: no-repeat;

0

background-image:url(../images/socialsprite.png);
background-position:0 0;

normally, I'll do something like this:
background: url(../images/socialsprite.png) no-repeat 0 0;
And, I think in your case,the first method I suggest above is a better solution.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.