background-size
背景・装飾背景画像のサイズを制御するプロパティです。contain（全体を表示）、cover（領域を埋める）のほか、px、%などの具体的な値でも指定できます。レスポンシブデザインで背景画像を最適に表示するために不可欠です。
構文
Syntax
background-size: auto | cover | contain | <length> | <percentage>コード例
例 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はロゴなどに適している。
関連プロパティ
ブラウザサポート
IE9+, 全モダンブラウザ