SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    css sprites and coordinates

    hi,
    i been confused over using css sprites. how does the coordination of x and y coordinate works?
    All those who wander aren't lost.

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The x-axis runs horizontally (left and right) and it is always the first value in the background-position property.

    The y-axis is the opposite, it runs vertically (top and bottom) and it is the second value in the background-position property.

    This snippet below tells the browsers to place the image 100px horizontally to the right and -100px vertically top.

    Code:
    background-position: 100px -100px;

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    by placing u mean, the viewpoint (showing) of the image. right?
    All those who wander aren't lost.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    by placing u mean, the viewpoint (showing) of the image. right?
    Yes, by placing it I meant position it.

    What I posted above was just an explanation of how the background-position property works. It can also take on % values as well.

    However with sprites it gets a little more complicated because you are using the pseudo :hover (and optionally :focus and :active) to control when those background positions happen.

    Here is a very simple example of a three state sprite using all three of those pseudo classes.

    In this recent thread I put together another example for someone else. There is a link to the test page in there and it is using this sprite.

    It will be best to experiment with some thing simple first until you get a firm understanding of how it all works.

    Hope that helps!

  5. #5
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    When I do sprites, I often still lose my image when I'm getting started.

    So my defaults are 0 0 so I can see the top-left of the image. To remember which way the image moves when I add coords, I often start with just small px differences. Then I don't "lose" my image and I know then how far to go (often I can't remember if I need -top/bottom or positive to go the direction I want). It doesn't help that I often need to think about which way is left or right : )


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •