background-attachment
CSSの書き方
background-attachment:値 ;
CSSの詳細情報 | |||||
---|---|---|---|---|---|
プロパティ名 | background-attachment | 読み方 | バックグラウンド・アタッチメント | ||
初期値 | scroll | 意味 | 背景画像の固定 | ||
値 | scroll/fixed | ||||
対象 | すべての要素 | ||||
CSSレベル | CSSレベル1 | 対応ブラウザ | Windows | MAC | |
継承 | しない | IE 5.0以上/FF1.0/NS7.1/OP8.0 | SF/IE5.0 |
解説
「background-attachment」プロパティは背景画像を固定するスタイルシートです。
例えば、ページ背景に背景画像を表示し、さらにそれを一部分で固定すると、背景は常に同じ位置に表示され、画面をスクロールしても背景が移動したり、場合によっては見えなくなるといったことがありません。
scroll
「background-attachment」プロパティの初期値は、「scroll」です。
これはこのプロパティを指定している要素をスクロールすると、背景も同じように移動します。
fixed
「background-attachment」プロパティの値を「fixed(固定)」にすると、背景は要素内で固定されて表示されます。
固定位置を定めたい場合は、別途「background-position」プロパティで設定します。
background-repeatプロパティと同時設定可能
このプロパティは背景画像の繰り返しの仕方を決める「background-repeat」プロパティと同時に設定できます。
例えば、「background-repeat」プロパティの値を「no-repeat」と指定すれば、背景画像を繰り返さず、一定の位置に固定することができます。
CSS/HTMLサンプル
body{
background-image:url(../../img/logo.gif);
background-repeat:no-repeat;
background-position:right top;
background-attachment:fixed;
}
BODY要素(ページ全体)に対して、背景画像を1回表示して、画面右上に固定 サンプル