background-position:?

[kennethjaysone]

I have a gif image that will be used for the navigation background. The image has a height of 400 pixels and a width of 206 pixels.

In this tutorial, we are asked to input the following CSS rules:

#navigation a {
text-decoration: none;
text-transform: uppercase;
display: block;
background: url(assets/tabs.gif) 0-195px no-repeat;
width: 200px;
height 24px;
color: #6b96b3;
padding-left: 10px;
padding-top: 11px;
}

#navigation a:hover {
background-position: 0-300px;
padding-top: 6px;
height: 29px;
}

I do not understand the background-position: rule?

0-300px; ? 0-195px; ? what do these values mean?

Thank you all in advance for your thoughts and views.

Kenneth

[Siebird]

0-300px; ? 0-195px; ? what do these values mean?

Thank you all in advance for your thoughts and views.

Kenneth

Background positioning can be specified in a couple different ways (i.e pixels, percentages, and direction(top,right,bottom,left)). In your tutorial they specify using pixels. The first is the vertical positioning '0' relative to the top of the element and the '-300px' is the horizontal positioning relative to the left side of the element. So this actaully places your image -300px to the left of the element. The actual tab image has both states on it, so there is no need for preloading images, this allows you to slide the image into place on hover.

[Centauri]

Actually, the first value, when defining two values for background position, is the horizontal one...

As your example stands at the moment, it is invalid - there should be a space between the zero and the minus sign :

 background: url(assets/tabs.gif) 0 -195px no-repeat;

As the <a> is 24px high, and the background position is offset 195px upwards, then the <a> will display that portion of the background image between 195px and 215px from the top. The hover will display that portion between 300px and 324px from the top.

I assume the image contains a number of different tab graphics and their associated rollover states (and possibly active states as well).

[Siebird]

Actually, the first value, when defining two values for background position, is the horizontal one...

Correct, I confused the two