背景画像がブラウザ表示領域に合わせて伸び縮み
背景画像をブラウザにあわせる
これを実現させるには、CSSのbackground-imageプロパティを使えば出来そうですが、残念ながら出来ません。
そこで、img要素をブラウザ表示領域の左上（left:0; top:0;）絶対位置指定（position: absolute;）で、あたかも背景画像のようにするのです。
つぎに、div要素を絶対位置指定（position: absolute;）にして、この中をあたかもbody要素とするのです。
サンプル
<html>
<head>
<title>背景画像がブラウザ表示領域に合わせて伸び縮み</title>
<style type="text/css">
#dummy-background-image {
width: 105%;
position: absolute;
top: 0;
left: 0;
}
#dummy-body {
position: absolute;
}
</style>
</head>
<body>
<img id="dummy-background-image" src="hiro.jpg" />
<div id="dummy-body">
<h1> 背景画像がブラウザ表示領域に合わせて伸び縮み</h1>
<h2> 解説 </h2>
<p>これを実現させるには、CSSのbackground-imageプロパティを使えば出来そうですが、残念ながら出来ません。</p>
<p>そこで、img要素をブラウザ表示領域の左上（left:0; top:0;）絶対位置指定（position: absolute;）で、あたかも背景画像のようにするのです。</p>
<p>つぎに、div要素を絶対位置指定（position: absolute;）にして、この中をあたかもbody要素とするのです。</p>
</div>
</body>
</html>
