Image sprite syntax

[afish674]

I'm trying to use this image as a background to save on file size on my site: https://dl.dropbox.c...pin-sprites.png Obviously to use the second pin along I need to move the background. I tried using this CSS but it doesn't seem to work, I'm not sure I have the correct syntax.

#po-pin{display:block;width:36px;height:57px;top:-15px;left:105px;background:url(../img/pin-sprites.png) no-repeat 43px left 0px top;}

If someone could write it out in both longhand (background-position:...) and shorthand as above then i'd appreciate it. Thanks! The tutorial here http://www.w3schools..._background.asp says that it should be:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Which I thought I followed. The code below works for the first pin in the line.

#po-pin{display:block;width:36px;height:57px;top:-15px;left:105px;background:url(../img/pin-sprites.png) no-repeat 0px top;}

Edited August 6, 2012 by afish674

[dsonesuk]

background:url(../img/pin-sprites.png) no-repeat 43px left 0px top; these relate to the same thing position, you can only set two values, textual top, center, bottom, left, right, OR a value plus unit

background:url(../img/pin-sprites.png) no-repeat 43px left;background:url(../img/pin-sprites.png) no-repeat left top;background:url(../img/pin-sprites.png) no-repeat 43px 0;

[afish674]

What I was trying to do was set an x, y co-ordinate in pixels. So I just need to use the co-ordinates as in your last example and leave off the keywords. Thanks