【CSS-rules】background-size(背景画像のサイズ指定)

[公開] 2024-09-04

background-sizeは、背景画像のサイズを指定するcssプロパティ。
元の縦横比を保たせたり、引き延ばしたり、縮小するなど、要素を基準とした背景サイズを指定できます。

background の種類

.	値	用途	親要素
1	`background-image`	背景画像、又は、グラデーション	カンマで繋いで複数指定可
2	`background-attachment`	位置の表示方法	固定(fix)するか要素と一緒にスクロールするか等
3	`background-position`	画像の初期位置	最初に表示される位置
4	`background-size`	画像のサイズ	要素に対する相対、又は、指定サイズ
5	`background-origin`	要素に対する配置(開始)位置	背景の開始点(左上)を指定する
6	`background-clip`	画像自身の配置位置	指定に合わせ要素内でクリップされる
7	`background-repeat`	画像の繰り返し	繰り返しの有無、方向、配置を指定
8	`background-color`	背景色

background-size 指定できる値

.	指定方法	指定名	説明
1	キーワード	`background-size: cover;`	縦横比を保ったまま、要素全体を覆うように表示
2	`キーワード`	`background-size: contain;`	縦横比を保ったまま、要素の縦又は横一杯になるように画像全体を表示
3	`値 1個`	`background-size: 50%;`	指定数値は幅 (横) とし、縦(高さ)は `auto` で設定される
4	`値 2個`	`background-size: 3em 25%;`	`幅(横) 縦(高さ)` の順で設定される

background-size サンプル

共通となるcssはまとめて、それぞれclassを２重掛けにしています
サンプルは全て background-repeat:no-repeat;「繰り返しなし」を指定しています。

bg-s.png
サイズ:700×180px
タイプ:jpg

共通CSSとHTMLを見る

CSS code

.bga {
  width: 100%;
  max-width: 600px; 
  height: 200px;
  margin-bottom: 24px;
  padding:5px 15px;
  background-image: url("https://ドメイン/wp-content/uploads/2024/09/bg-s.png");
  background-repeat:no-repeat; /* 繰り返しなし */
  background-color:#ccc;       /* 要素の背景色 */
  color: #fff;
  font-size:22px;
  text-align:right;
}

HTML code

<div class="bga">～～</div> /* ←値に合わせclassを2重掛けにします */

1 – background-size: cover;

背景画像の 縦or横 を要素と同サイズにして、縦横比を保持したまま要素全体を覆うように表示します。

cover

HTML code

<div class="bga bga1">cover</div>

CSS code

.bga1 {background-size: cover;}

背景画像が要素全体を覆うように設定されます。
要素全体を覆う事が優先となる為、要素と画像の縦横比が同一でない限り、背景画像の一部が切り取られます。(当ページは全て同じ画像を使用。サンプルは画像と要素の縦横比が異なる為、幅が切り取られています)
内容量が多くレスポンシブで高さが変わりやすい、利用画像、等、要素の縦横比と画像の縦横比が大きく異なる場合は、使用する背景画像のサイズに注意が必要です。

2 – background-size: contain;

背景画像全体の 縦or横 を要素と同サイズにして、縦横比を保持したまま背景画像全体を表示します。

contain

HTML code

<div class="bga bga2">contain</div>

CSS code

.bga2 {background-size: contain;}

※グレー部分を含めた大きさが要素の出来上がりサイズです。

背景画像が、はみ出すことなく要素の横(or縦) 一杯になるよう設定されます。
背景画像全体を表示する事が優先となる為、要素と画像の縦横比が同一でない限り、縦(下) or 横(右) に画像のない余白ができます。
要素全体を覆いたい場合は背景画像を繰り返すようにします。

3 – 値 1個

背景画像の 値 = 横幅 (縦 = auto) として、縦横比を保持した指定サイズで表示します。

70%

HTML code

<div class="bga bga3">70%</div>

CSS code

.bga3 {background-size: 70%;}

※グレー部分を含めた大きさが要素の出来上がりサイズです。

%での指定は要素に対する相対です。
101%以上や要素より大きいサイズを指定した場合、要素からはみ出した部分は切り取られます。
要素全体を覆いたい場合は背景画像を繰り返すようにします。

4 – 値 2個

背景画像の 横(幅) 縦(高さ) として、指定サイズで表示します。

240px 80%

HTML code

<div class="bga bga41">240px 80%</div>

CSS code

.bga41 {background-size: 240px 80%;}

auto 80%

HTML code

<div class="bga bga42">auto 80%</div>

CSS code

.bga42 {background-size: auto 80%;}

%での指定は要素に対する相対です。
一方をautoにした場合、画像の縦横比を保持します。(右サンプル / auto 80%)
'横縦' ともにサイズ指定した場合、画像の縦横比は無視されます。
(左サンプル / 画像 700px×180px → 指定 240px80%)
101%以上や要素より大きいサイズを指定した場合、要素からはみ出した部分は切り取られます。
要素全体を覆いたい場合は背景画像を繰り返すようにします。

サイズ指定の注意点

background-size は、あくまで画像の表示サイズを指定するだけ。

指定サイズに合わせた画像を呼び出すわけではありません。
指定サイズに合わせた画像のclip(切り抜き)ではなく、画像のサイズを拡大(縮小)するものです。

実際の画像サイズと大きく異なるサイズを指定した場合でも表示されますが、画質劣化やパフォーマンスなどの問題が起きやすくなります。

画像より指定サイズがあまり大きいと、無理に引き延ばすことになり画質が落ちます。
画像より指定サイズがあまり小さいと、画質の劣化、更に、無駄にサイズ(バイト)の大きい画像を使うことによりパフォーマンスに悪影響を及ぼします。
画像と異なる縦横比を指定すると、画像のゆがみや画質劣化が起きます。
特別な理由がある場合を除き、キーワード指定、又は、縦か横どちらか一方はauto にする事をお勧めします。

出来るだけ background-image で実際の表示に近いサイズの画像を指定しましょう。