CODEWITHSUNDEEP
htmlcsscss-sprites
Benny Tjia
Benny Tjia

Reputation: 4883

CSS Sprite Question: horizontal background position

I'm looking at this sprites tutorial here. The finished CSS sprites result is here. And this is the whole working code:

#skyline {
 width: 400px;
 height: 200px;
 background: url(test-3.jpg);
 margin: 10px auto; padding: 0;
 position: relative;
}
#skyline li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}

#skyline li, #skyline a {height: 200px; display: block;}
#panel1b {left: 0; width: 95px;}
#panel2b {left: 96px; width: 75px;}
#panel3b {left: 172px; width: 110px;}
#panel4b {left: 283px; width: 117px;}

#panel1b a:hover {background: transparent url(test-3.jpg) 0 -200px no-repeat;}
#panel2b a:hover {background: transparent url(test-3.jpg) -96px -200px no-repeat;}
#panel3b a:hover {background: transparent url(test-3.jpg) -172px -200px no-repeat;}
#panel4b a:hover {background: transparent url(test-3.jpg) -283px -200px no-repeat;}

I am a little confused. On the a:hoverpart of the code (the part where the sprites should show up), the vertical position for the sprites background is set up to be -200px, which makes sense since the top corner needs to be above the current starting point for that background image. But why is the horizontal position needs to be negative (-96px,-172px)? my first intuition was that if you start from 0, then the next one would start from the last one's width which is +96px. If we are talking about regular coordinates, I dont see why we shoud use negative value for horizontal position there...

now if I change all of them to positive then the sprite is not working anymore. So why is it negative? Can somebody experienced with CSS explain me this? Would appreciate any answer/input thanks

EDIT:

This is the master image: Master Image

Upvotes: 0

Views: 1141

Answers (1)

Charlie Brown
Charlie Brown

Reputation: 2825

The position specifies where to "slide" the spritesheet to show the image on the page. So if an image is 96px to the right, you need to slide the whole sheet 96px left to bring it into view.

Effectively, you have 4 panels with differing widths. When the mouse hovers, it takes a copy of the image, slides it up 200px to get the hover image, then slides it left so the correct slice begins in the panel. The width of the panel clips the right side of the image off.

enter image description here

Upvotes: 5

Related Questions