背景画像を各モニタに合わせたい

コーディングをしていると、時々このようなデザインが来ます。

この、背景デザインとしては素晴らしいけど
（画像例からは素晴らしさが1ミリも伝わりませんが）
コーダー泣かせの、この切り所がみつからない、背景画像。

コーダーやってて●年
ようやく落とし所を見つけました。

0から目指すWebマスター様より
http://www.allinthemind.biz/markup/css/background-size.html

[code]
background: url(画像ファイルURL) no-repeat center top;
-moz-background-size: 100% auto;
background-size: 100% auto;
[/code]

このコードは、背景画像の縦横比を維持し、高さの設定はしない場合です。
なお、下にリピートさせたい場合は
no-repeat を repeat-y に変更して下さい。

また、指定要素のサイズに合わせて背景画像が常にフィットしている場合は
[code]
-moz-background-size:cover;
background-size:cover;
[/code]

背景画像を全部表示させたい場合は
[code]
-moz-background-size:contain;
background-size:contain;
[/code]

縦横比を維持せずにサイズを統一させたい場合は
[code]
-moz-background-size:100% 100%;
background-size:100% 100%;
[/code]

背景画像の縦横比を維持し、幅の設定はしない場合は
[code]
-moz-background-size:auto 100%;
background-size:auto 100%;
[/code]

多分このCSS設定は、IE8以前のブラウザには効かないと思います。
そこはもう……泣くしかない。

しかしPCは決して安い買い物ではないので
XP搭載のまま乗り切りたい気持ちもまた充分理解できるのです。主婦として。

他に何か解決法があったら、またご紹介します。

【ハートブレーン】https://blog.heart-kokoro.net/