Css sprites and coordinates

HTML & CSS
1

hi,
i been confused over using css sprites. how does the coordination of x and y coordinate works?

2

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.

background-position: 100px -100px;
3

by placing u mean, the viewpoint (showing) of the image. right?

4

by placing u mean, the viewpoint (showing) of the image. right?
Yes, by placing it I meant position it. :slight_smile:

What I posted above was just an explanation of how the [FONT=Courier New]background-position[/FONT] 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 [URL=“http://www.css-lab.com/test/bades/site_images/nav_sprite.jpg”]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! :slight_smile:

5

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 : )