Help with understanding CSS Sprites.

[benjamin.morgan]

I understand it is multiple images in one image. What I don't understand is how you use them and how you can find the pixels of the top left corner and bottom right one (if that is the right values needed) and I need to know how to put it into the code. for example

background-image: url('somecssspriteimage.jpg');
Need help with what it would be(Would it be background position?)

 

[ChurroV]

http://www.w3schools.com/cssref/pr_background-position.asp

I think this is what you're looking for.

 

[benjamin.morgan]

No, that helps me none, I need it explained please.

 

[Absolution]

oh sprites are new to me too! I will read up more on them, and we can discuss them, this is the first site I found

http://www.w3schools.com/css/css_image_sprites.asp

 

[ChurroV]

I've found out how it's done:

background-position: 0px 0px; puts the top left of your sprite image at the top left of wherever you're placing it.

background-position: 0px -100px; puts the part of your sprite image that's at the left and 100px down from the top, at the top left of wherever you're placing it.

i'm not completely sure, but i think the x position works the same way: if you want to start from 100px to the right of your picture, put background-position: -100px 0px

 

[Absolution]

I think I understand a bit of what they do now, you place sprites as background images to block elements. So you can cut off the left and top edges of a sprite image by using the background position property (if you define its positioning from the top left). Then you can cut off the right and bottom with width and height.

It is a bit clever to reduce the server requests. I remember seeing google doing that with its PacMan anniversary game and I wondered how they did it.

 

[hkjeffchan]

The drawback is that you must do that as background only. I do that frequently with javascript to achieve the animation effect.

For your interest, you may take a look at my iPhone Animation Web Design page. Your comment is welcome too!

 

[benjamin.morgan]

That is a cool page