背景画像を描画領域の面積ぴったりに自動で合わせる方法

CSS3では、背景画像を「描画領域の面積」に合わせて自動で拡大・縮小させる機能が加わりました。

従来でも、img要素を使って画像を表示していれば、描画領域に合わせて自動的に画像サイズを拡大・縮小させるのは簡単でした。が、背景画像に関しては表示位置を調節するくらいしか方法がなかったのですよね。
しかし！
CSS3で追加されたbackground-sizeプロパティを使えば、背景画像を描画領域の面積に合わせて自動で拡大・縮小させ、描画領域内にぴったり合わせることも簡単になりました。

background-sizeプロパティの書き方概要

このbackground-sizeプロパティの使い方はとても簡単で、以下のようにCSSソースを書けば良いだけです。具体的な表示例などは後ほど解説しますので、まずは書き方の概要だけを紹介しておきます。

▼描画領域全体を覆い尽くすまで拡大・縮小させる場合：

background-size: cover;

background-sizeプロパティに値「cover」を指定するだけです。
※表示例と記述例は後述(→背景画像が「描画領域全体を覆い尽くす」よう拡大・縮小させる書き方)。

▼描画領域内に背景画像のすべてが表示されるよう拡大・縮小させる場合：

background-size: contain;

background-sizeプロパティに値「contain」を指定するだけです。
※表示例と記述例は後述(→背景画像が「描画領域内にすべてが表示される」よう拡大・縮小させる書き方)。

▼描画領域内に(横に)5個表示されるように拡大・縮小させる場合：

background-size: 20% auto;

background-sizeプロパティに値を2つ指定します。上記の場合は「横20%・高さ自動」の意味です。20％なら5個並び、25％なら4個並びます。
※表示例と記述例は後述(→描画領域内に(横に)4個表示されるように拡大・縮小させる書き方)。

簡単ですよね。
たったこれだけの記述で、背景画像の表示サイズが「描画領域の面積」に合うように自動調節されます。
以下に、background-sizeプロパティを使ってみた表示例と記述例をご紹介致します。

ただ背景に画像を指定した場合の表示 (比較用)

実際にbackground-sizeプロパティを使う前に、ただ背景画像だけを指定した場合にどう見えるのかを比較として掲載しておきます。
記述するCSSは、以下の1行だけです。これで背景画像(fallgreen.jpg)を指定しています。

p {
   background-image: url('fallgreen.jpg');
}

表示すると、以下のように見えます。

画像の原寸サイズは500×334pxなので、横幅500px以上の環境でなら、上記のサンプル領域には写真が2枚以上見えているはずです。上記の表示と、これ以降にご紹介するサンプルでの表示とを見比べてみて下さい。

背景画像が「描画領域全体を覆い尽くす」よう拡大・縮小させる書き方

これが最も用途としては多いのではないでしょうか。
1枚の背景画像を、縦横比を保ったまま、描画領域全体に広げる方法です。

p {
   background-image: url('fallgreen.jpg');
   background-size: cover;
}

background-sizeプロパティに値「cover」を指定しています。表示すると、以下のように見えます。

写真を使う場合、タイル状に繰り返されると不自然に見える場合があります。
そんなときには、このようにbackground-sizeプロパティを使って、描画領域の横幅一杯に背景画像を広げると良いのではないでしょうか。

描画領域の横か縦かどちらか大きい方に合わせて（縦横比を保ったまま）拡大縮小されます。

背景画像が「描画領域内にすべてが表示される」よう拡大・縮小させる書き方

背景画像が途中で切れてしまうのを防ぎたい場合は、背景画像が「描画領域内にすべてが表示される」よう拡大・縮小するよう指定すると便利です。

p {
   background-image: url('fallgreen.jpg');
   background-size: contain;
}

background-sizeプロパティに値「contain」を指定しています。表示すると、以下のように見えます。

画像を途中で切ることなく、確実に見せたい場合は、このようにbackground-sizeプロパティを使って、描画領域内にすべてが表示されるよう指定すると良いのではないでしょうか。

描画領域内に(横に)4個表示されるように拡大・縮小させる書き方

background-sizeプロパティでは、背景画像の表示サイズを直接指定することもできます。
「％」を使って割合で指定すれば、「何個掲載するか」を指定できます。例えば、下記のように「25%」を指定すれば、横方向に4個表示されることになります。

p {
   background-image: url('fallgreen.jpg');
   background-size: 25% auto;
}

background-sizeプロパティに値「25% auto」を指定しています。これは、「横幅が25％」・「高さは自動」という意味です。表示すると、以下のように見えます。

ちなみに、「25% auto」ではなく「auto 25%」と順序を逆に指定すれば、「縦方向に4つ」入るように表示されます。
なお、autoの指定を使わずに「25% 30%」などと指定すれば、縦横比は維持されなくなります。

背景画像の表示サイズを具体的に指定する書き方

背景画像の表示サイズを、「px」などの単位を使って具体的に指定することもできます。
この場合は、描画領域の面積は関係ありません。指定のサイズで表示されます。

p {
   background-image: url('fallgreen.jpg');
   background-size: 400px auto;
}

background-sizeプロパティに値「400px auto」を指定しています。これは、「横幅が400ピクセル」・「高さは自動」という意味です。表示すると、以下のように見えます。

この場合も、autoの指定を使わずに「400px 450px」などと指定すれば、縦横比は維持されなくなります。

というわけで、背景画像を「描画領域の面積」に合わせて自動で拡大・縮小させる方法の紹介でした。
Internet Explorerでは、IE9以降で対応しています。非対応ブラウザでも単に指定が無視されるだけで、背景画像自体は表示されますから、気軽に使えば良いのではないかと思います。(^_^;)

(更新日：2019年09月16日)