スマホサイト制作において、AppleのRetinaディスプレイが登場して以来、画像は端末の解像度を考慮し、表示させる２倍以上のサイズで制作するのがほぼ一般的になっています。

そのため、表示させたい画像のサイズ（現状多くは原寸の半分のサイズ）を新たに指定しなければならないのですが、
img要素で挿入する場合は、width,height属性で指定したり、リキッドレイアウトなどの場合ではCSSでwidthをパーセント指定したりします。

そして、
背景画像として表示する場合は、background-imageまたはbackgroundプロパティを指定した上で、background-sizeプロパティを指定し、画像のサイズを調整します。

今回はこのbackground-sizeの使い方と値について記します。

また、簡単なサンプルを用意しましたので、参考になればと思います。
画像の原寸サイズは幅800px高さ450pxになります。

サンプル

background-sizeとは

background-sizeとは背景画像のサイズを指定するCSSプロパティです。
background-imageまたはbackgroundプロパティと一緒に指定する必要があります。

構文

次より値の指定方法についてです。

background-size: 値指定;

/*構文例*/
background-size: 24px;
/*↑画像の高さを省略した場合は、自動的にautoが指定される*/
background-size: 24px auto;
background-size: 50% 50%;
background-size: 100% 100%;

/*もし画像の原寸幅が200pxで半分のサイズで表示させたい場合*/
.sample {
    background-image: url("sample.png");
    background-size: 100px;
}

ピクセル指定の場合、指定した値で画像の大きさが決定されます。

パーセント指定の場合、背景の表示領域に対して決定されます。
幅50%高さ50%と指定した場合、表示領域の幅50%高さ50%の領域で表示されますし、
幅100%高さ100%と指定した場合、表示領域の幅100%高さ100%で表示されます。

後者の幅高さ100%の指定の場合、表示領域の縦横にピッタリくっついて表示されるので、当然ですが、画像の比率は維持されません。

画像の比率を維持する場合は次に記すcoverまたはcontainを指定します。

background-size: cover;

.sample {
    background-image: url("sample.png");
    background-size:cover;
}

coverを指定をした場合、画像の幅と高さの比率は固定されたまま、背景の表示領域を覆うように表示されます。

表示領域が変更された場合でも、画像の中心が確認できるように表示されます。

つまり、表示領域の幅が広げられたときは、画像の上下がオフセットされ、
表示領域の高さが広げられたときは、画像の左右がオフセットされるように表示されます。

html要素やbody要素に指定することで、フルスクリーン表示を得られる指定の方法としてよく見かけます。

参考

background-size:coverで背景画像をフルスクリーンにフィットさせたレスポンシブウェブデザイン

background-size: contain;

.sample {
    background-image: url("sample.png");
    background-size:contain;
}

containの指定をした場合も、画像の幅と高さの比率は固定されます。

coverとの違いは、オフセット機能がないといったところでしょうか。
表示領域が変更された場合でも、画像が全て表示されるの所がポイントです。

おまけ
background-size:containでブラウザのサイズに合わせて背景画像を100%表示させる方法

imgタグで挿入すれば済んでしまうといえばそれまでなのですが、おまけです。

background-size:coverとは若干異なった方法になり、imgタグを挿入したのと同じ効果が得られるといった感じです。

あらゆる場面に万能とは言えませんが、スマホサイト制作やレスポンシブサイトでたまには役に立つかもしれません。

サンプル

.sample {
    height: 0;
    padding-top: 56.25%;
    background: url('sample.png') 0 0 no-repeat;
    background-size: contain;
}

高さを0に指定している代わりにpaddingで高さを出し、背景の表示領域を確保しています。paddingで指定する値はパーセント指定です。

paddingの高さの計算については下記の計算式で求められます。

サンプルの場合は幅640px高さ360pxですので、

360 ÷ 640 × 100 = 56.25(%)となります。

パーセント指定をすることでブラウザのサイズに合わせて高さが変わるようになりました。同時にbackground-size:containを指定すれば、表示領域に隙間なく画像が表示されます。

まとめ

background-sizeプロパティは、現在スマホサイト制作でよく使用されるプロパティですが、PCサイトでも頻繁に活躍する日ももうすぐかと思います。

ちなみにIEでは9以降が対応しています。

また、古いAndoroid端末では-webkit-background-sizeのようにプレフィックスを付け足さないとしっかり表示されないようですので、対応する場合は注意したいと思います。