background 水平指定と垂直指定

質問

お世話になっています。
ＣＳＳで画像の水平指定と垂直指定が未だよく解っていないので
教えてください。

ｗidth：214pxのnavi.gifをおいた場合

#header li#about a:hover {
background: url(../images/navi.gif) -32px 0;
}

#header li#clients a:hover {
background: url(../images/gnavi.gif) -76px 0;
}
この-32px,0pxや76px,0pxの意味はどういう意味なんでしょうか？
すみません、解る方、お願い致します。

回答No.3

grumpy_the_dwarf · ベストアンサー

backgroundってのは、background-color、background-image、
background-repeat、background-attachment、background-position
の5つのプロパティを一度に簡略的に指定するものです。その中では
background-positionだけが長さを値に持つので、backgroundプロパ
ティに長さが書いてあったらbackground-positionに指定すべきもの
だと判断します。

で、backgound-positionの値の定義ですが、最初の長さが水平方向
の位置、2番目が垂直方向の位置です。単位がパーセントではないの
で、画像の左上端と要素の左上端の位置関係であり、-32px 0 とい
うことは画像の左端は要素の左端より32ピクセル左に寄っていて、
画像の上端が要素の上端に一致しています。速い話が背景画像の左
側32ピクセルは隠れています。

今回の例では該当するリストの各要素の幅が決められていて、一つ
の画像の一部分を見せることで画像リンクのように見せているんで
しょうね。読み込みが一度だけになるので、マウスが移動したとき
に素早く背景画像が切り替わる効果を期待している訳です。

お礼

解りやすい説明ありがとうございます！目からうろこが落ちました。

「backgroundってのは、background-color、background-image、
background-repeat、background-attachment、background-position
の5つのプロパティを一度に簡略的に指定するものです。」

なるほど！！

ありがとうございました。

回答No.2

SAYKA

縦横が増えると右と下
減ると左と上に位置をずらせるからそういう指定じゃない？

回答No.1

pasocom

背景画像の位置指定だと思いますが、この例では－（マイナス）が付いているので、Ｘ方向で画面から左に出てしまっているように思います。
どこか別のところで中心配置指定がしてあるとか、ないですかね。