How to use sprite css

Question

Possible Duplicate:
Best Way to Sprite Images?

I have the following image that I want to use for users to log into site.

http://dl.dropbox.com/u/7468116/facebook_signin.png

However I am not able to make css work properly.

Answer 1

.sprite {
background-image: url("pathto/facebook_signin.png");
background-position: 0 0;
}

.sprite:hover {
background-position: 0 16px /*or whatever the y position of the 2nd button is*/
}

.sprite:active {
background-position: 0 32px /*or whatever the y position of the 3rd button is*/
}

Answer 2

Something like this should work:

a.fb {
    display: block;
    background: ("/path/to/sprite.png") 0 0 no-repeat; /* start with normal state */
    width: 150px;
    height: 18px;
    text-indent: -9999px; /* for image replacement */
}
    a.fb:hover,
    a.fb:focus {
        /* hover and focus state */
        background-position: 0 -20px;
    }
    a.fb:active {
        /* click state */
        background-position: 0 -40px;
    }

Answer 3

If you are on mac, you can use some tools for writing your CSS file automatically. These tools are ordering your sprites in an effective way and also writes CSS files for you. You don't need to fight with ordering and calculating pixel coordinates, etc. I suggest Sprite Master.

Answer 4

What exactly's not working in your CSS? Spriting is involves changing the background position of the image on hover (or other states).

So it's really just

#element {
  background-position-y: 10px;
}
#element:hover {
  background-position-y: 0px;
}

Would be helpful to see your CSS.