No.2です。
簡単ですが・・・時間が無くて、書いてませんでしたが、一枚の画像を背景としてウィンドウサイズいっぱいに広げる方法の具体的方法です。
HTMLが
<body>
<div class="article">
<p class="background"><img src="./images/background/bg.png" width="180" height="135" alt=""><!-- 実サイズ800px600px --></p>
<div class="header">
<h1>見出し</h1>
</div>
<div class="section">
</div>
<div class="footer">
</div>
</div>
</body>
だとしたら
html,body{margin:0;padding:0;width:100%;height:100%;}
body{
background:url(./images/background/sky.jpg);
background-size:100% auto;
}
div.article{width:100%;height:100%;margin:0;position:absolute;}
/* 古いブラウザ用 */
p.background img{
display:block;
position:absolute;top:0;left:0;
width:100%;
height:auto;
z-index:-1;
}
これで、横幅いっぱい、縦はそれに合わせて伸縮しますから、画像は変形しません。
お礼
ご丁寧なアドバイスありがとうございます。さっそくやってみます。