background-attachment: fixed;
| ブラウザ |
|
|---|---|
| プロパティ |
background-attachment は、背景画像の固定表示を指定するプロパティです。（ウィンドウに対する固定表示となります）
このスタイルを設定すると、ボックスの背景画像がスクロールされないようになります。
div {
width: 70%;
height: 200px;
overflow: auto;
background-image: url(back.gif);
background-attachment: fixed;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
background-attachment |
scroll |
背景画像を固定しない - スクロールさせる （初期値） |
fixed |
背景画像を固定する - スクロールさせない |
fixedを指定する際の注意点
ボックスに対する固定表示ではなく、ウィンドウに対する固定表示であるという点に注意してください。（ただし、IE 6以下ではボックスに対する固定表示になってしまうようです）
また、fixed を指定している場合は、背景画像の表示位置がウィンドウを基準とした位置になるので注意が必要です。例えば、垂直に並ぶ画像を右側に配置した場合、それはボックス内の右側に配置されるのではなく、ウィンドウ内の右側に配置されることになります。（状況によっては、ボックス内に背景画像が表示されなくなってしまいます）
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
div {
width: 70%;
height: 200px;
overflow: auto;
margin-bottom: 1.5em;
background-color: #ffffff;
background-image: url(neko.gif);
color: #000000;
}
div.example1 { background-attachment: fixed; }
div.example2 { background-attachment: scroll; }
</style>
</head>
<body>
<div class="example1">
<p>背景画像を固定する（fixed）</p>
...
</div>
<div class="example2">
<p>背景画像を固定しない（scroll）</p>
...
</div>
</body>
</html>
- 表示例
-
ボックスのスクロールバーではなく、ブラウザのスクロールバーを上下に動かすと違いが分かりやすいです。
背景画像を固定する（fixed）
スクロール
スクロール
スクロール
スクロール
スクロール
スクロール
スクロール
背景画像を固定しない（scroll）
スクロール
スクロール
スクロール
スクロール
スクロール
スクロール
スクロール
（この画像を背景にしています）