2種類の画像を固定させる
background-attachment: fixed を指定した場合、背景画像の繰り返しの開始位置は、要素の左上ではなく、ViewPort（閲覧領域）すなわち画面の左上になります。
body要素の背景画像 back017-1a.gif、見出しや段落の背景画像を back017-1b.gif とし、それぞれ background-attachment: fixed で固定させます。back017-1b.gif は、back017-1a.gif の色調を明るくしたものです。すると、背景画像が見出しや段落の部分で半透明になっているかのような効果を出せます。
ただし、これに正しく対応しているのは、ネットスケープ6以降とマッキントッシュ版IE 5だけです。ウィンドウズ版のIEでは効果がありません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title>2種類の画像を固定させる</title>
<style type="text/css">
<!--
body { background-image: url(back017-1a.gif);
background-attachment: fixed; }
h1, p { background-image: url(back017-1b.gif);
background-attachment: fixed; }
h1 { font-size: 1.5em; }
p { width: 20em; line-height: 1.5em; }
-->
</style>
</head>
<body>
<h1>2種類の画像を固定させる</h1>
<p>
background-attachment: fixed を指定した場合、背景画像の繰り返しの開始位置は、要素の左上ではなく、ViewPort（閲覧領域）すなわち画面の左上になります。
</p>
<p>
body要素の背景画像 back017-1a.gif、見出しや段落の背景画像を back017-1b.gif とし、それぞれ background-attachment: fixed で固定させます。back017-1b.gif は、back017-1a.gif の色調を明るくしたものです。すると、背景画像が見出しや段落の部分で半透明になっているかのような効果を出せます。
</p>
<p>
ただし、これに正しく対応しているのは、ネットスケープ6以降とマッキントッシュ版IE 5だけです。ウィンドウズ版のIEでは効果がありません。
</p>
</body>
</html>
