background-size
背景・装飾背景画像のサイズを制御するプロパティです。contain（全体を表示）、cover（領域を埋める）のほか、px、%などの具体的な値でも指定できます。レスポンシブデザインで背景画像を最適に表示するために不可欠です。
構文
Syntax
background-size: auto | cover | contain | <length> | <percentage>Tailwindでは
| bg-cover | background-size: cover |
| bg-contain | background-size: contain |
| bg-auto | background-size: auto |
任意値: bg-[length:200px_100px]
コード例
例 1
background-size: cover;実行結果
background-size: cover（全体を覆う）
アスペクト比を保ちながら要素全体を覆う
例 2
background-size: contain;実行結果
background-size: contain（全体が収まる）
アスペクト比を保ちながら要素内に収める
例 3
background-size: 100% auto;実行結果
background-size: 100% auto（幅100%、高さ自動）
幅100%、高さは自動調整
💡 TIPS
coverはヒーロー画像、containはロゴなどに適している。
🤖 AIがよく間違えるポイント
coverとcontainの取り違えはobject-fitと同様にAIでも頻発します（cover=領域を埋めて見切れる、contain=全体表示で余白）。また%指定は「要素サイズに対する割合」で画像の縦横比を無視するため、意図せず歪んだ背景になる生成コードがあります。
💬 AIへの頼み方
ヒーローセクションの背景写真を、画面サイズが変わっても見切れ方が自然なようにbackground-sizeとpositionで調整して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。
関連プロパティ
ブラウザサポート
Baseline 広く利用可能
Chrome
3+
Firefox
4+
Safari
5+
Edge
12+