CSS Sprite problem with images

[dany12]

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

[JorgeM]

When I used sprites for the first time in my web projects, I just followed the instructions from W3Schools. http://www.w3schools.com/css/css_image_sprites.asp

To build the sprites, i use an online generator...there are a few and they all produce the same result, usually providing the necessary CSS code.

[dany12]

OK but why is my code wrong?

[JorgeM]

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.

[dany12]

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

[JorgeM]

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.

[lps]

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;

[lps]

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.

[dany12]

yes your wright I got it now thanls for the help