【CSS】background-sizeの基本的な使い方を詳しくサンプル解説！

CSSのbackground-sizeを指定する基本的な使い方について解説していきたいと思います。

background-sizeプロパティとは？

backgroundプロパティには他にも様々な種類がありますが、background-sizeはその名の通り、background(背景)のサイズに関する指定になります。

background-sizeで指定できる値は主に以下のものがあります。

background-size: auto

background-sizeの初期値は「auto」です。自動的に幅が算出されます。特に指定をしていないと元の画像サイズで表示されます。

background-size: contain

contain（コンテイン）と読みます。背景画像のサイズを指定する時に、背景画像の縦横比を崩したくない時がありますよね。background-size: contain;は背景画像の縦横比を保持します。
特徴として縦横比を保持したまま背景画像の全体が表示される、といったものがあります。

background-size: cover

contain（カバー）です。background-size: cover;は、設定する要素全体を覆うように自動的に背景画像が広がります。縦横比も保持されます。
containとの違いとして、coverの場合、縦横比を保持したまま要素全体を覆う形になるため、要素と背景画像の縦横比が異なる場合、背景画像は途切れて表示される形になります。

background-size: 長さ

主にpxで背景画像のサイズを指定します。

background-size: パーセンテージ

主に％で背景画像のサイズを指定します。

それでは実際のサンプルを見ながら見ていきましょう。

background-size: autoの使い方

autoは初期値なので、あまり使う機会がありません。
初期値は基本的に入力する必要がありません。
使うとするのであればスタイルを上書きしたい時などでしょうか。

ちなみにautoそのままだと以下のように背景画像は表示されます。

使用している画像のサイズは、300×184pxです。

縦横400pxの要素に指定すると以下のような形になります。

See the Pen background-size:auto by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen.

分かりやすくするためにbackground-repeat: no-repeat;（背景画像を繰り返さない）を指定しています。

繰り返し背景であれば、no-repeat不要で、auto（初期値）のままでも大丈夫です。

例えば以下のような例です。

See the Pen background-size:auto 2 by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen.

元画像は以下画像でサイズは14x14pxです。

autoなので元サイズのまま繰り替えされています。
このサンプルの背景をもっと細かくしたい、といった場合は背景画像サイズを14px以下にすることでもっと細かい背景になります。

background-size: containの使い方

それでは次にcontainの使い方についてみていきます。

先程のautoをcontainに変えてみましょう。

以下のようになります。autoとの違いがわかりますでしょうか？

See the Pen
background-size:contain by JAJAAAN Dev.01 (@jajaaan_dev01)
on CodePen.

autoでは背景画像が元サイズで表示されていましたが、containだと要素全体に広がるように拡大されているのが分かるかと思います。

containの特徴は、必ず全体が表示される、という点です。

background-size: coverの使い方

background-size: coverの使い方についてみていきます。

以下例です。

See the Pen background-size: cover by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen.

要素全体に背景画像が縦横比が保持されたまま表示されているのがわかります。
ちなみにcoverは要素全体を覆うため、no-repeatなどの繰り返しに関する指定は不要です。

合わせてよく使うのはbackground-postion: center;などでしょうか。

例えば、background-postion: centerと指定すると以下のようになります。

See the Pen background-size: cover 2 by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen.

背景画像が中央を基準に要素全体を覆うようになります。

background-size: 長さ(px)の使い方

backgrouin-sizeでそのまま背景画像のサイズを指定します。

以下、例です。

See the Pen background-size:px by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen.

background-size: 100px; と指定しているため、縦横最大100pxで背景画像が表示されるようになります。

ちなみに以下のように横幅と縦幅を指定することができます。

background-size: 横幅 縦幅;

以下の例だと、横幅200pxで縦幅を300pxに指定しています。

See the Pen
Untitled by JAJAAAN Dev.01 (@jajaaan_dev01)
on CodePen.

background-size: 長さ(％)の使い方

前述した項目だとpxで指定していましたが、パーセントで指定することも可能です。
（ちなみにパーセント以外も指定できます。）

See the Pen background-size:% by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen.

ここでbackground-size: 100% 100%;と指定すると要素全体に背景画像が広がるようになります。

まとめ

いかがでしたでしょうか。

Webサイトでよく使うbackgroundですが、サイズの指定方法で様々な表現が可能です。

よければ参考にしてみてください。