背景サイズプロパティ

最終更新：2026-09-13

background-size 背景サイズプロパティ

background-size は背景画像の大きさを制御し、CSS3 で導入されました。auto（画像の本来のサイズ）、cover（コンテナ全体を覆う）、contain（コンテナ内に画像全体を表示）、および明示的な長さとパーセントの値に対応します。このプロパティはレスポンシブデザインで非常に役立ちます。

カテゴリ
初期値	auto
継承	いいえ
適用対象	all
アニメーションタイプ	length
CSS バージョン	CSS3
状態	標準

📝 構文

background-size: auto | cover | contain | <length> <percentage>;

⚙️ 値

値	タイプ	説明
`auto`	キーワード	画像の本来のサイズ
`cover \| contain`	キーワード	コンテナを覆う、または含める
`<length> \| <percentage>`	タイプ	明示的なサイズの値

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
background-size	✓ v4	✓ v12	✓ v4	✓ v4.1	✓ v10
すべての主要ブラウザーでサポート

ヒント： cover はアスペクト比を保ちながらコンテナを埋めますが、コンテンツが切り取られることがあります。contain は画像全体を表示しますが、空白が残ることがあります。

重要： background ショートハンドで size を使う場合、position の後に続け、スラッシュで区切る必要があります。例: center/cover。

❓ よくある質問

Qbackground-size: cover と contain のどちらを使うべきですか？

A画像をコンテナ全体に確実に覆い、切り取っても構わない場合は cover を使用します。長辺がコンテナに合い、短辺が切り取られます。画像全体を見る必要があり空白も許容できる場合は contain を使用します。cover はバナーやカードの背景に一般的で、contain は商品写真やロゴ、全体表示が必要なものに適しています。どちらも本来のアスペクト比を保つため、画像が歪むことはありません。

Qbackground-size はアニメーション可能ですか？

Aはい。background-size は補間可能なプロパティなので、transition や @keyframes で滑らかにアニメーションします。例えば hover 時に background-size: 100% から 110% へ拡大して、さりげないズーム効果を得られます。ただし頻繁な変更は再描画を引き起こす可能性があります。パフォーマンスに敏感なズームアニメーションには transform: scale() を推奨します。

Q背景を引き伸ばさずに領域を埋めるにはどうすればよいですか？

Abackground-size: cover; を使用してください。画像を本来の比率で拡縮し、短辺がコンテナを埋め長辺が切り取られるため、歪むことはありません。画像の比率とコンテナが大きく異なる場合は、background-position: center を追加して残す部分を制御します。切り取りを完全に避けるには、contain（空白を許容）を使用するか、コンテナの比率を画像に合わせます。

Qbackground-size の単一の値と 2 つの値はどう機能しますか？

A2 つの値は幅と高さを設定します。例: background-size: 300px 200px;。高さが auto の場合は比率に応じて拡縮します。1 つの値（例: background-size: 300px）は幅を設定し、高さは比率を保つよう自動的に拡縮します。cover、contain、auto は特殊なキーワードで、長さの値と混在させることはできません。