background-attachment

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

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

background-attachment

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

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

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

使用例

サンプル(A)

[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; }