ホームページの背景画像をパソコン画面に合わせたい

質問

ホームページを閲覧しに来るユーザーに見せる背景画像をパソコンの画面の大きさに合わせて、画面枠と背景画像の大きさを揃えたいのですが、どのようなタグにすればいいのかわかりません。
1024×768ピクセルの画面でも
1280×1024ピクセルの画面でも
1920×1200ピクセルの画面でも
同じような背景画像として映るようにしたいです。縦と横の画像の比率は多少変化しても構いません。　

どうか、ソースの記述をお願い申し上げます。お手数かけて誠に申し訳ありません。どうか、どうか、ご教授願います。

回答No.2

k0021 · ベストアンサー

<div style="position:absolute;top:0;left:0;" class="hh">
<img src="r014p.jpg" style="width:100%;" alt="背景画像"></div>
<div style="position:absolute;top:0;left:0;width:100%;">
<div style="padding-left:2em;padding-right:1em;padding-bottom:1.5em;">
通常の内容
</div></div>

padding-left:2em;padding-right:1em;padding-bottom:1.5emは、ページに対して空白とっています。

hhは、縦と横は、javascriptで変更です。
bb=screen.width;　//横幅
aa=screen.height;　//縦幅
if (aa>=1200) {dirName="g_f/t1200.css";}
else if(aa>=1024) {dirName="g_f/t1024.css";}
else {dirName="g_f/t768.css";}
//window.alert("dirName!!" + dirName);
document.write("<link rel='stylesheet' href='"+dirName+"' type='text/css'>");

お礼

回答誠に誠にありがとうございます。

回答No.1

ORUKA1951

CSS2では無理です。CSS3だと、background-size:contain;で可能です。(IEは9以降)

ただ、ウェブサイトとしては、よほどのことがない限り使われることは無いでしょう。
多くの場合、ユーザビリティの観点からウィンドウ巾が重要で高さは気にしないデザインにします。縦長のディスプレイ、i-phoneやi-padの普及から考えると、ウィンドウ巾に関わらず表示エリアを特定の範囲で伸縮させることが多いからです。
div.article{
　width:80%;
　min-width:800px;max-width:960px;
　margin:0 auto;
　background:white url() no-repeat;
}
とか・・・

　でく無くはないですが、HTMLの構造を変えてしまうと本末転倒、角をためて牛を殺してしまうことになるので、お勧めはしません。
　後方互換を考えると、背景ではなく画像として配置してそのサイズを伸縮させる。
div.article p.backImage{
　position:absolute; top:0; left:0;
　display:block;
　width:100%; height:auto;
}

お礼

回答誠にありがとうございます。