CSS Sprite background-position

Hoi,

Ik heb deze sprite gemaakt:

Deze is 400 bij 175 pixels, nu wil ik dus de save image capturen. Deze is 15 bij 15 pixels. Ik dacht dus:

y = 175 pixels (zo hoog is de spread) - 15 pixels (hoogte save image) = 160px

Wat ik dus dacht:

Codeblok (voorbeeld.php):

1
2
3
4
5
6

#saveImage {
background-position: 0px 160px;
width: 15px;
height: 15px;
cursor: pointer;
}

Nu krijg ik het groene gedeelte van de button, verkeerde y as dus. Wanneer ik 190 pixels gebruik werkt het wel.

Waarom is er een offset? Want de sprite is helemaal niet 190pixels??

Volgens mij moet je juist in de negatieven werken. Dus in jouw geval moet je -160px pakken.
Maar als je dus een offset pakt van 190 (175 + 15), dan werkt het op dezelfde manier, omdat ie dan gaat overflowen, en ook op de juiste positie terecht komt.

Zie dit plaatje om te begrijpen WAAROM je in negatieven werkt:

En hoe krijg ik dat ik wel postive waardes kan gebruiken? Waarom hebben ze het niet gewoon rechtsboven gedaan?

Dylanh schreef:

En hoe krijg ik dat ik wel postive waardes kan gebruiken? Waarom hebben ze het niet gewoon rechtsboven gedaan?

Dan moet je dus zoals je zelf al zei 190 gebruiken, dus de hoogte van je gehele plaatje + overflow.

En omdat dit eigenlijk een soort hack is. Zie dit StackOverflow antwoord maar. Dan snap je waarschijnlijk wel hoe het werkt:
http://stackoverflow.com/a/5365084/2299364