CSS3 の「background-size」プロパティがものすごく便利

このサイトのデザインを変えたのですが、その時に最近流行している「背景画像の設定」をしてみました。背景画像を付けるには CSS で body タグの「background」プロパティを弄れば良いのですが、画像ファイルを指定しただけではこんな感じになってしまいます。

ウィンドウサイズに合わせて背景画像が拡大縮小されると良さそうですね。どうしたものかと検索してみたら、CSS3 で追加された「background-size」というプロパティを使えば良いことが分かりました。

背景画像が常にウィンドウ全体を満たすようにするには、background-size に "cover" と設定します。

おお、簡単です。JavaScript で画像サイズを変更させる必要があるのかと思っていましたが、CSS3 ですごく簡単になりました。これは知っておいた方が良いプロパティですね。