背景画像の表示方法の違い(background-sizeについて)
背景画像の表示(background-sizeプロパティ)について、説明します。

背景画像の表示の仕方を指定できるbackground-sizeプロパティについて、違いを確認しましょう。
目次
プロパティの概要について
background-sizeのプロパティ
auto | 初期値。そのままの画像サイズで表示される。 |
---|---|
contain | 画像の比率はそのまま、画像全体が収まるように表示される。 |
cover | 画像の比率はそのまま、背景画像の枠が埋まる状態で表示される。(画像が見切れる場合あり) |
px、% | 指定のpxや%に応じて、画像サイズを指定できる。 |
サンプル一覧
今回使う画像と、HTML/CSSはこちら。
<!-- 空のdivを用意しました --> <div class="sample"></div>
.sample{ width: 300px; height: 150px; border: 1px solid #333; /*わかりやくするため、ボーダー引いてます。*/ background-image: url(https://taneppa.net/wp-content/uploads/2019/05/cat_sample.jpg); background-repeat: no-repeat; }
autoについて
初期値です。そのままの画像サイズで表示されるため、表示エリアに画像が入りきらない場合は 切れてしまいます。
.sample{ background-size: auto; }
containについて
画像の比率はそのまま、画像全体が収まるように表示されます。
下記の例では、幅に余裕があったため 表示エリアの右側も余白ができています。
.sample{ background-size: contain; }
coverについて
画像の比率はそのまま、背景画像の枠が埋まる状態で表示されます。そのため、表示エリアの比率が、画像と異なる場合は 画像が切れてしまうので気をつけてください。
.sample{ background-size: cover; }
%やpxについて
%やpxを指定することで、画像の表示サイズを指定することができます。
今回は50%と指定していますが、表示エリアの大きさに対しての50%のサイズになります。
.sample{ /*background-size: よこ たて*/ background-size: 50% auto; }
注意点
極端な例ですが、background-sizeの値を、横幅も高さも 画像の比率に合わない数値の場合、比率が崩れます。
もし比率を保ちたい場合は、どちらかにautoを指定してくださいね。
.sample{ background-size: 200px 50px; }
最後に
今回は、background-sizeに絞って紹介しました。これに加えて、調整が必要なときは、background-positionなどで調整してみてくださいね。
興味があれば、「背景画像の比率を保ったまま、レスポンシブ対応する」こちらの記事も読んでみてください(^^)