Jump to content

Image sprite syntax


Recommended Posts

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 by afish674
Link to comment
Share on other sites

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;

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...