CSSで記載した意味が分かりません。。。

質問

いつもお世話になっております。参考にしたサイトでcssについて下記記載がありました。
#hoge div {
background: url("/img/front/home/img_key.jpg") no-repeat scroll -480px 0 transparent;
height: 427px;
margin: 0 auto;
position: relative;
width: 960px;
}

分からないのは、scroll -480pxでおそらくwidth960pxと関係しているのですが、
-480pxにする意味が分かりません。そもそも－はどのような意味があるのでしょうか。

分かる方居たら教えてください。

回答No.3

神崎 渉瑠（@taloo）

no-repeatやrepeat-x、repeat-yと併用して、画像の一部分だけを表示する方法です。

画像の表示場所をマイナスで指定すると、表示エリアの左端よりも左、上端よりも上にある部分が見えなくなります。
（-480pxですから、画像の480px目から右側の部分だけが見えるようになります。）

「CSSスプライト」で検索すると、それを応用した、詳しくややこしい方法が見つかると思います。

widthと背景画像のサイズは特に関係ないと思います。
たまたま、480pxの２倍になっただけでしょう。

回答No.2

ORUKA1951

簡略化プロパティなので、分けて書くと
background-mage: url("/img/front/home/img_key.jpg") ;
background-reoeat: no-repeat;
background-attachment: scroll;
background-position: -480px 0;
background-color: transparent;
となります。
background-attachmentについては、http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/colors.html#propdef-background-attachment を参照
初期値(nitial)は、scrollなのでと国指定しなくても良い。
background-positionは、 http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/colors.html#propdef-background-position を参照。
　二つの値の組み合わせの場合は、前の値がパディング領域の左からの距離、後ろの値がパディング領域の上からの距離です。負の値なので画像の上480pxは見えません。

その他のプロパティは、
14. 色と背景 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/colors.html )

回答No.1

t_ohta

背景画像の横方向の位置指定は画像の左端をdivの左端に合わせた状態が 0px です。
-480px と指定するとそこから背景画像を 480px 左へずらしていますので、481px 目がdivの左端に来て、それより左側の画像は隠れて見えなくなります。

よく使う状況としては、最初は画像を隠しておいてマウスオーバーなどのイベントで背景画像の位置指定を変更して画像を見せるというのが一つ。
もう一つは、複数アイコンなどを一つの画像にまとめておき、位置をずらしながら必要な場所に必要な画像だけを表示させるというものです。
他にも状況によって使い方があると思いますが、全体像が見えないのでとりあえず上記のような使い方が思い浮かびました。