背景画像を固定する
CSSの書き方
background-attachment:値 ;
|
|||||||||||||||||||||||||||||||||||||||||
解説
「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回表示して、画面右上に固定 サンプル
