background-attachment

CSSプロパティ「background-attachment」の解説とサンプル。

背景画像を、スクロールと一緒に移動させるかどうかを指定するプロパティ。

background-repeatの値を「no-repeat（繰り返しなし）」にした際、通常スクロールすると動く背景画像を、一定の場所に固定させることができる。

fixed	背景画像を一定の場所に固定して表示する。
scroll	スクロールと同時に移動させる。何も指定しない場合はこれが適用される。

[CSSの記述]

body {
	background-image:url('hogehoge.gif');
	background-position:left top;
	background-repeat:no-repeat;
	background-attachment:fixed;
}

[HTMLの記述]

<textarea class="sample" rows="5" cols="30">テキストテキスト</textarea>

[ブラウザ上の表示]

サンプルページをご確認ください。

[backgroundプロパティで指定]

body { background:url('../sample.jpg') left top no-repeat fixed; }

CSSレイアウト実践講座カテゴリ