この記事の要点

background-size は要素の背景画像のサイズを指定する CSS プロパティ よく使う値は cover（要素を完全に覆う）と contain（はみ出さず全部見せる） 長さ（px・%）や auto で幅と高さを個別に指定できる（例: 200px auto） 複数背景にはカンマ区切りで個別サイズを与える background-position / background-repeat と組み合わせて配置を決める

background-size とは

background-size プロパティは、要素の背景画像をどの大きさで描画するかを決めます。指定しない場合は画像本来のサイズで表示され、要素が画像より大きいと余白部分は background-repeat の設定に従ってタイル状に繰り返されます。レスポンシブな WEB デザインでは cover がほぼ必須で、ヒーロー画像・カードのサムネイル・パターン背景まで幅広く使われます。

基本構文

selector {
  /* 単一値 */
  background-size: cover;
  background-size: contain;
  background-size: auto;

  /* 幅 高さ の 2 値 */
  background-size: 200px 100px;
  background-size: 50% auto;

  /* 複数背景（カンマ区切り） */
  background-size: 100px 100px, cover;
}

キーワード値

値	意味	典型用途
auto	画像本来のサイズで表示（初期値）	アイコン / 小さなパターン
cover	アスペクト比を保ちつつ要素を完全に覆う（はみ出した部分はクリップ）	ヒーロー画像 / 背景写真
contain	アスペクト比を保ちつつ要素内に全体が収まる最大サイズ	ロゴ / 図解の全体表示

長さ・パーセントでの指定

例	意味
background-size: 200px 100px	幅 200px、高さ 100px に固定
background-size: 50% auto	幅は要素の 50%、高さはアスペクト比を保つ
background-size: auto 80%	高さは要素の 80%、幅はアスペクト比を保つ
background-size: 100% 100%	要素にぴったり伸縮（アスペクト比は崩れる）

パーセントは背景画像のコンテナ（背景配置領域）に対する割合として解釈されます。background-origin を変えると基準も変わる点に注意。

cover と contain の違い

同じ画像と要素でも、cover と contain では仕上がりが大きく違います。

項目	cover	contain
アスペクト比	保つ	保つ
要素を覆う	完全に覆う（はみ出す）	はみ出さない
余白	なし	余る可能性あり
クリップ	あり	なし
典型用途	背景写真・ヒーロー	ロゴ・図解

実用例: ヒーロー背景

.hero {
  height: 60vh;
  background-image: url("/img/hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

画面サイズが変わっても余白なく中央に画像が表示される、最も定番の組み合わせです。

実用例: パターン背景を等間隔で繰り返す

.pattern {
  background-image: url("/img/dot.png");
  background-size: 24px 24px;   /* 1 タイルのサイズを固定 */
  background-repeat: repeat;
}

複数背景でのサイズ指定

background-image をカンマ区切りで複数指定したときは、background-size も同じ順で書きます。

.card {
  background-image:
    url("/img/icon.png"),
    url("/img/bg.jpg");
  background-size:
    32px 32px,
    cover;
  background-position:
    right 12px top 12px,
    center;
  background-repeat: no-repeat;
}

レスポンシブで切り替える

.hero {
  background: url("/img/hero-mobile.jpg") center / cover no-repeat;
}

@media (min-width: 768px) {
  .hero {
    background-image: url("/img/hero-desktop.jpg");
  }
}

ショートハンドの background: 画像 配置 / サイズ ... で cover をまとめて書けます。

よくある落とし穴

症状	原因 / 対処
cover にしても伸びない	要素に高さがない。height や aspect-ratio を指定
画像が縦に伸びてぼやける	100% 100% でアスペクト比を崩している。cover に変える
contain で隙間が出る	仕様どおり。背景色を併用するか background-position で寄せる
Retina で画像が荒い	2x の画像を用意し、サイズで縮める（例: 200px の領域に 400px 画像）
SVG が大きく表示される	SVG の viewBox 設定と background-size の両方を見直す

初期値とブラウザ既定

background-size の初期値は auto auto（画像本来のサイズ）です。古い IE6/7 では未サポートでしたが、IE9 以降の全モダンブラウザで利用可能。スマホでも問題なく動作します。

background-position との組み合わせ

cover で画像をクリップするとき、どの部分を見せるかは background-position で決めます。

/* 人物写真で顔を上に寄せたい */
.hero {
  background: url("/img/person.jpg") top center / cover no-repeat;
}

/* フォーカスポイントを微調整 */
.banner {
  background-position: 30% 20%;
}

SVG 背景での挙動

SVG の場合、viewBox があれば contain / cover が綺麗にスケールします。viewBox がない SVG はラスタ画像と同じく実寸が必要。アイコンの背景使用時は SVG の preserveAspectRatio とも組み合わせて確認しましょう。

関連

• 背景 — 親カテゴリ
• background-image / background-position / background-repeat / background-origin
• object-fit — <img> 要素を cover / contain したいとき
• aspect-ratio — 縦横比を保ったレスポンシブ枠
• image-set() / srcset — Retina 向け画像切替