スタイルシート［CSS］/ボックス/背景画像をスクロールさせない

background-attachment は、ウィンドウに対して背景画像の固定表示を指定するプロパティです。

このスタイルを設定すると、ボックスの背景画像をスクロールしないように指定できます。

div {
width: 70%;
height: 200px;
overflow: scroll;
background-image: url(image/back.gif);
background-attachment: fixed;
}

background-attachment	fixed … （固定する - スクロールさせない）
background-attachment	scroll … （固定しない - スクロールさせる）デフォルト

【fixedを指定する場合の注意点】

htmlやbody以外の要素（例えばdiv要素やp要素等）で fixed を指定する場合、固定させる対象がブラウザにより異なるので注意が必要です。

■IEの場合
その要素（div要素やp要素等）に対して固定します。
fixedを指定したボックス内をスクロールさせた時に、そのボックスの背景画像は固定されます。

■Netscape、Firefox、Operaの場合
ウィンドウ（ページ全体）に対して固定します。
ページ全体をスクロールさせた時に、fixedを指定したボックス内の背景画像は固定されます。

■他の指定と組み合わせた場合の不具合
背景画像に関する他の指定（並び方、表示位置）とfixedを組み合わせた場合、指定内容によってはボックス内に背景画像が表示されなくなる場合があります（IE以外のブラウザではウィンドウを基準とした表示位置になるため）。ですので、並び方や表示位置を指定する場合は、fixedは指定しない方がいいでしょう。

htmlやbody以外の要素（例えばdiv要素やp要素等）に対しては、fixedは指定しないことをお勧めします。

使用例

<html>
<head>
<title>TAG index Webサイト</title>

<style type="text/css">

</style>

</head>
<body>

<div id="example1">
<p>スクロールさせない</p>
・
・
</div>

<div id="example2">
<p>スクロールさせる</p>
・
・
</div>

</body>
</html>

▼これをブラウザで見ると次のように表示されます

スクロールさせない

スクロール

スクロールさせる

スクロール

（この画像を背景にしています）