CSS - Multiple images in one and using CSS to determine a background

Question

If you don't know what I mean, check this image out:

Multiple images

I want to know how it works, CSS yes, but exactly how does it all work out when using a background using this image and then it is all cut all exactly what it is supposed to do - when determined as a background for this image.

Would be interesting for me to know how - so I can take my CSS level up a bit more :P

Thanks

Answer 1

What you are looking for is CSS Sprites, there are heaps of tutorials and ways to achieve this. Basically what you are doing is declaring a background and using background-position to decide what in the background is displayed.

CSS Sprites are great by the way, good job for trying to figure them out.

Answer 2

{
    height: foo;
    width: foo;
    overflow: hidden;
    background: colour url() no-repeat 0 pixels-to-top-of-image;
}