CSSのbackground-sizeとは？coverの使い方と各値の違いをわかりやすく解説

はじめに

Webサイトを制作していると、「背景画像が引き伸ばされてぼやけてしまう」「画像が小さく繰り返し表示されてしまう」「ヒーローセクションの背景が意図した見た目にならない」といった問題に直面することがあります。

そのような背景画像のサイズ調整に欠かせないのが、CSSのbackground-sizeプロパティです。background-sizeを使えば、背景画像の表示サイズを自在にコントロールでき、要素いっぱいに美しく広げたり、画像の比率を保ったまま収めたりと、デザインの意図に沿った表示が可能になります。

本記事では、background-sizeの基本概念から、特によく使われるbackground-size: coverの意味と使い方、各値の違いと使い分け、実務で役立つ実装例まで初心者にもわかりやすく解説します。この記事を読めば、背景画像のサイズ指定に迷うことなく、意図通りの美しいレイアウトが実現できるようになります。

CSSのbackground-sizeとは？

background-sizeプロパティの定義と概要

CSSのbackground-sizeプロパティは、要素に設定した背景画像の表示サイズを制御するプロパティです。

基本的な構文は以下の通りです。

セレクター {
  background-image: url('画像パス');
  background-size: 値;
}

指定できる主な値は以下の通りです。

• cover：要素全体を覆うように背景画像を拡大・縮小する
• contain：画像全体が要素内に収まるように拡大・縮小する
• auto：画像の元のサイズを基準に自動調整する（デフォルト）
• 数値・パーセンテージ：幅・高さを直接指定する

background-sizeはbackground-imageが指定されていることが前提となります。background-imageのない要素に指定しても効果はありません。

background-sizeが必要になる場面

background-sizeプロパティが実装で必要になる主な場面は以下の通りです。

ヒーローセクションやフルスクリーン背景を実装するとき

画面いっぱいに背景画像を広げたい場合、background-size: coverを使用することで、画面サイズを問わず要素全体をきれいに覆う表示が実現できます。

カードコンポーネントのサムネイル背景を設定するとき

固定サイズのカードに対して様々な比率の画像を背景として使用する場合、background-sizeで統一した表示サイズに揃えることができます。

背景画像を特定のサイズに固定したいとき

数値やパーセンテージで幅・高さを直接指定することで、デザインカンプ通りの精密なサイズ制御が可能です。

background-sizeと併用するプロパティ

background-sizeは単独で使用するよりも、関連するCSSプロパティと組み合わせることで効果を最大限に発揮します。

/* 基本的なセット指定の例 */
.hero {
  background-image: url('hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

これらを組み合わせた場合、ショートハンドも使用できます。ショートハンドでは /（スラッシュ）の前にbackground-position、後にbackground-sizeを記述します。

background-sizeの各値の意味と動作の違い

background-sizeには複数の指定方法があります。各値の動作の違いを正確に理解することが、適切な使い分けの前提となります。

cover・contain・autoの違いと概要

cover（要素全体を覆う）

.box {
  background-size: cover;
}

coverは、要素全体を背景画像で隙間なく覆うように、画像のサイズを自動調整します。画像のアスペクト比は維持されますが、要素と画像の比率が異なる場合、画像の一部がトリミング（切り取り）されます。

ヒーローセクションや全面背景など、「要素全体を美しく覆いたい」場面に最適です。

contain（画像全体を収める）

.box {
  background-size: contain;
}

containは、画像全体が要素内に収まるように拡大・縮小します。アスペクト比は維持され、トリミングは発生しませんが、要素と画像の比率が異なる場合は余白（空白）が生じます。ロゴ・アイコン・全体を見せたい画像に適しています。

auto（元のサイズに基づく）

.box {
  background-size: auto;
}

autoはbackground-sizeのデフォルト値です。画像の元のサイズを基準に表示します。幅・高さの一方だけを指定した場合、指定していない側はautoで元の比率を保ちながら自動計算されます。

数値・パーセンテージ指定の使い方

background-sizeでは、キーワードのほかに数値やパーセンテージで直接サイズを指定することができます。

幅と高さを個別に指定

.box {
  background-size: 300px 200px; /* 幅300px・高さ200px */
}

幅と高さをスペース区切りで指定します。この場合、元のアスペクト比は無視され、指定したサイズに強制的に変形されます。

幅のみ指定（高さはautoで比率維持）

.box {
  background-size: 300px;    /* 幅300px、高さはauto（比率維持） */
  background-size: 300px auto; /* 上と同じ意味 */
}

パーセンテージ指定

.box {
  background-size: 100% 100%; /* 要素の幅・高さに合わせて引き伸ばす */
  background-size: 50%;       /* 要素の幅の50%、高さはauto */
}

パーセンテージは要素のサイズに対する割合として計算されます。100% 100%は画像を要素全体に引き伸ばしますが、アスペクト比が崩れる点に注意が必要です。

各値の選び方の基準

使用目的を明確にして値を選ぶことが、背景画像を意図通りに表示するための第一歩です。

• 要素全体を隙間なく覆いたい → cover
• 画像全体を切らずに要素内に収めたい → contain
• 元のサイズで表示したい → auto
• 精密なサイズ制御が必要なとき → 数値指定
• 要素に対する割合で指定したいとき → パーセンテージ

background-size: coverの使い方と活用シーン

background-size: coverは、要素のボックス領域を背景画像で隙間なく覆うように画像のサイズを自動調整します。

動作の仕組みは以下の通りです。

1.画像の幅と高さのどちらか小さい方の辺が要素のサイズに合わせて拡大される
2.アスペクト比を維持したまま拡大されるため、もう一方の辺は要素をはみ出す
3.はみ出した部分はトリミング（クリッピング）されて非表示になる

background-size: coverの基本的な動作

.hero {
  width: 100%;
  height: 500px;
  background-image: url('hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

background-size: coverを使用する際は、background-repeat: no-repeatを必ず合わせて指定することを推奨します。指定がない場合、画像が小さいサイズで繰り返し表示されることがあります。

ヒーローセクション・フルスクリーン背景への活用

ヒーローセクションやフルスクリーン背景は、background-size: coverの最も代表的な活用シーンです。

ヒーローセクションの実装例

.hero-section {
  width: 100%;
  height: 100vh; /* ビューポートの高さいっぱい */
  background-image: url('hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

height: 100vhと組み合わせることで、画面全体を背景画像で覆うフルスクリーンのヒーローセクションが実現できます。

テキストの可読性を高めるオーバーレイとの組み合わせ

.hero-section {
  position: relative;
  background-image: url('hero.jpg');
  background-size: cover;
  background-position: center;
}
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4); /* 半透明の黒いオーバーレイ */
}

背景画像の上に半透明のオーバーレイを重ねることで、テキストの可読性を向上させる実装です。実務では欠かせないテクニックのひとつです。

パララックス効果との組み合わせ

.parallax-section {
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* スクロール時に背景を固定 */
}

background-attachment: fixedを合わせることで、スクロール時に背景画像が固定されたパララックス効果を実現できます。

background-size: coverを使うときの注意点

background-size: coverは非常に便利な一方で、意図しない表示結果を招くことがあるプロパティです。実務でよく遭遇する問題と対処法を把握しておきましょう。

画像が意図せずトリミングされる問題

background-size: coverを使用すると、要素と画像のアスペクト比が異なる場合に画像の一部が必ずトリミングされます。これは仕様通りの動作ですが、被写体が切れてしまうと意図した見た目になりません。

/* 例：横長の要素に縦長の画像を指定した場合 */
.wide-box {
  width: 800px;
  height: 300px;
  background-image: url('portrait.jpg');
  background-size: cover;
  /* 画像の上下がトリミングされる */
}

主な対処法

• background-positionで焦点を調整する
• 画像自体を要素に合ったアスペクト比で用意する
• object-fitを使用した<img>タグへの切り替えを検討する

background-positionとの組み合わせで表示位置を制御する

background-size: coverでトリミングが発生する場合、background-positionで表示の焦点（基準位置）を制御することが最も有効な対処法です。

background-positionの主な指定値

/* 人物の顔が上部にある画像の場合 */
.portrait-bg {
  background-image: url('person.jpg');
  background-size: cover;
  background-position: center 40%; /* 上から40%の位置を基準に */
}

パーセンテージを使えば、被写体の焦点に合わせてより細かく位置調整が可能です。ブラウザの開発者ツールで値を調整しながら最適な位置を見つけましょう。

まとめ

CSSのbackground-sizeプロパティは、背景画像の表示サイズをコントロールするための重要なプロパティです。本記事では、基本概念から各値の違い、実践的な活用例と注意点まで包括的に解説しました。

background-sizeプロパティを正しく理解・活用することで、背景画像の表示崩れを迷わず解決し、デザインカンプ通りの美しいレイアウトを自信を持って実装できるようになります。

CSSやフロントエンド開発のスキルをさらに体系的に習得したい方には、WEBMASTERSのプログラミングスクールがおすすめです。未経験から実務レベルまで対応したカリキュラムで、現場で即戦力となるスキルを身につけることができます。