css sprite background-position not working

StackOverflow https://stackoverflow.com/questions/23514913

  •  17-07-2023
  •  | 
  •  

Question

I am trying to move a piece of text on a specific part of image using css sprites.But the background position I am applying doesn't seem to work. I have tried changing the background position but the text part(i.e. twitter, google plus) doesn't move to the correct place.

The <body>code is given below:

<div class="container">
<a class="Twitter" href="http://twitter.com/">twitter</a>
<a class="Plus" href="http://plus.google.com/">google plus</a>
</div>

The CSS is given below:

.container
{
background: url('http://i.imgur.com/s5rf9GY.png') no-repeat; height: 30px;
width:1247px;    
background-color:#444444;
} 

.container .Twitter 
{
background-position: -627px 0;
}
.container .Plus
{
background-position: -655px 0; 
}

The fiddle is located here.

I want the respective text i.e. twitter and google plus to be placed on their respective logos located on the center part of the image.I cannot figure out where am I going wrong. Please help me with it.

Was it helpful?

Solution

You have you CSS a little messed up. You have the background on the container, not the anchors.

.container
{
    width:1247px;
    height:30px;    
    background-color:#444444;
}

.container a
{
    background: transparent url('http://i.imgur.com/s5rf9GY.png') no-repeat; 
    height: 30px;
    width:30px;
    display:block;
    float:left;
    text-indent:-9999px
}

.container .Twitter 
{
    background-position: -491px 0;
}

.container .Plus
{
    background-position: -527px 0; 
}

Check the fiddle http://jsfiddle.net/Tn4F4/3/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top