複数の背景画像

CSS3(草案)では複数の 背景画像を表示出来るようになるようですが、現在のCSS2.1ではbodyに対して 背景画像を表示する位置は、全体または任意の位置、縦一列、横一列の内いずれか １つしか選択出来ません。
右上と左下や左右両側に縦一列等２つ以上の位置に表示させたい場合はどの様に すれば良いでしょう？
背景画像はbody要素以外にも設定する事が出来ます。そこで、div要素にも背景画像を 設定し、body開始タグの直後に div開始タグ、body終了タグの直前で div終了タグを 置いて、bodyのmarginとpaddingはゼロ、このdivのpaddingを適当に調整して、 それぞれに背景画像を設定します。

次のソースは、このページのように左右縦一列に背景画像を設定した例ですが、 背景画像をスクロールさせる場合です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>背景はスクロール</title>
<style type="text/css"><!--
body {
margin: 0px;
padding: 0px;
 background: url("m/chain_v.png") left repeat-y scroll;
}
#bg {
padding: 10px 30px;
background: url("m/chain_v.png") right repeat-y scroll;
}
 --></style>
</head>
<body>
<div id="bg">
ページ内容

</div>
 </body>
</html>

※ 無料レンタルなどのホームページスペースで、ページ上部や下部に広告が 自動挿入される場合、広告が正しく表示されない可能性があります。

では、このページ同様にスクロールさせず固定とする場合はどの様にすれば良い でしょう？
そうです。 scroll を fixed にすれば良い事は容易に分かりますね。 しかし、残念ながらIEでは fixed にしても divに設定した背景がスクロールしてしまいます。 (勿論IE以外のブラウザでは正常に固定となります)
仕方がないので IEだけ見捨てる事にします。という訳にも行かないので IEだけ処理を分岐させる事にします。
次の様に書くとIE以外のブラウザにはコメントアウトとして認識されます。

<!--[if IE]>
この文章はIEだけ表示されます
<![endif]-->

この条件分岐コメントを利用してIE6以下はdivに overflow: auto; でスクロールバーを 表示させ、bodyは overflow: hidden; でスクロールバーを非表示とする事で、 どのブラウザでも固定となりました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>背景は固定</title>
<style type="text/css"><!--
body {
margin: 0px;
padding: 0px;
 background: url("m/chain_v.png") left repeat-y fixed;
}
#bg {
padding: 10px 30px;
background: url("m/chain_v.png") right repeat-y fixed;
}
 --></style>
<!--[if lt IE 7]>
<style type="text/css">
body { overflow: hidden; }
#bg {
width: 100%;
height: 100%;
overflow: auto;
}
</style>
<![endif]-->
 </head>
<body>
<div id="bg">
ページ内容

</div>
 </body>
</html>

※ 標準準拠モードには対応していません。（IE6以上も他のブラウザ同様 padding の内側が要素の幅、高さとなるため）
※ ３枚以上はdiv要素の内側に更にdiv要素（勿論idは変えて）を追加していきますが、 padding 及びIEの overflow:auto; のスタイルは一番内側となるdiv要素にのみ指定 します。また、右側に配置する背景を一番内側のdiv要素に貼り付けるようにします。 （IEの各divの幅は100%ですのでスクロールバーが表示されると一番内側のdiv以外は 右がずれるため）
※ 無料レンタルなどのホームページスペースで、ページ上部や下部に広告が自動挿入 される場合、広告が正しく表示されない可能性があります。
※ レイアウトで幅が打ち決めされたページ（ブラウザ画面を縮めると横スクロールが 発生するページ）では使用出来ません。そのようなページでは幅は決まっていますから 背景画像を一枚に合成して使用するなどの方が適当です。
2007/07/29 条件分岐コメントをIE7に対応させ、<body scroll="no"> を body { overflow: hidden; } に変更しました。

次のスクリプトはbody要素とページ内容の間に id="bg" のdiv要素を挿入するものです。 広告の自動挿入されるようなレンタルホームページスペースなどでは有効となるかも 知れません。（<div id="bg">及び</div>の代りに使用）

<script type="text/javascript"><!--
// Create div id="bg" and add this div between body and contents.
// Script by Amenti. http://amenti.usamimi.info/
if (window.addEventListener)
 window.addEventListener("load",add_bg,false);
else if (window.attachEvent && document.getElementById)
 window.attachEvent("onload",add_bg);
function add_bg() {
 var bg=document.createElement("div");
 bg.setAttribute("id","bg");
 while(document.body.firstChild) bg.appendChild(document.body.firstChild);
 document.body.appendChild(bg);
}
// --></script>