HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


背景画像を固定する

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