新しいブラウザを使ってＷＥＢサイトを閲覧していると、本文がスクロールしても背景が固定したままのサイトを見かけることがあります。これを実現する方法を示しましょう。
実は「カスケーディング・スタイルシート」（ＣＳＳ）を使えばわりと簡単にできるのです。元々ＣＳＳを使っているなら、ほんのわずかの「おまじない」を書き加えるだけで背景が固定されます。下のリストの(3)の部分、青色で書かれた background-attachment:fixed がバックグラウンドを固定する「おまじない」です。既にＣＳＳで背景を指定しているなら、この一言を書き加えるだけでＯＫです。<body>タグで背景を指定している場合は少し手間が掛かりますが、下のリストをよく見てテキストエディタで作業すればそれほど大変と言うことはないと思います。（追記：「おまけ」参照）
(1)が、「スタイルシートを使います」という宣言です。実はほとんどのブラウザはこれが無くても正しく表示出来るらしいですが、それは約束違反ですからきちんと宣言を書きましょう。
(2)〜(4)の間が<style>要素です。この中にスタイルシートの本文を書きます。下のリストでは説明のため<body>要素だけにスタイルを定義していますが、実際にＣＳＳを使う場合は色々なＨＴＭＬ要素に対するスタイルの定義をここに書き並べることになります。
赤字で書かれた部分は説明用です。実際のＨＴＭＬテキストには書きません。
<!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">
ここまではお約束の宣言文です。charsetを実際に使う物に合わせる、
という他は大抵このままで構わないかと思います。
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> (1)
<STYLE TYPE="text/css"> (2)
<!--
ここからＣＳＳの「本体」です。<style>という要素を知らない、
古いブラウザが、ＣＳＳの中味をそのまま表示してしまわないように、
ＨＴＭＬのコメントとして書くことが推奨されています。これはこれで別
の問題の原因になるの可能性があるですが、現在のところ、この方法が
一番「安全」かと思います。
body {background-image:url(wall_neko6.gif);background-color:#EEFFFF;
color:#000;background-attachment:fixed} (3)
-->
</STYLE> (4)
</head>
<body>
ここに本文を書きます。
</body>
</HTML>