background-size
背景・装飾背景画像のサイズを制御するプロパティです。
構文
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+, 全モダンブラウザ