背景画像を固定する

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回表示して、画面右上に固定 サンプル

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!