背景画像をレスポンシブに対応させる、縦横比を維持して領域内に納めたり領域を埋めたりする
レスポンシブデザインで背景画像を使用したいとき、縦横比を維持して表示領域に合わせる為にはどうするか。
サンプルはウィンドウ幅を変えてみるとわかりやすい。
- background-size: cover;
- 表示領域を覆う最小サイズになるように拡大縮小する
- background-size: contain;
- 表示領域に収まる最大サイズになるように拡大縮小する
- background-size: 横指定 縦指定;
- 固定値（px等）、パーセント、autoで指定する
coverをつかって表示領域を覆う
CSS
- .p-bgCover {
- background:#ccc url(/images/sample/fox.jpg) center center no-repeat;
- background-size:cover;
- }
HTML
- <div class="p-bgCover"></div>
sample
領域のサイズwidth100% height 100px 背景画像サイズ640ｘ435
containを使って領域に納める
CSS
- .p-bgContain {
- background:#ccc url(/images/sample/fox.jpg) center center no-repeat;
- background-size:contain;
- }
HTML
- <div class="p-bgContain"></div>
sample
領域のサイズwidth100% height 100px 背景画像サイズ640ｘ435
横と縦を指定する
CSS
- .p-bg30Auto {
- background:#ccc url(/images/sample/fox.jpg) center center no-repeat;
- background-size:30% auto;
- }
HTML
- <div class="p-bg30Auto"></div>
sample
領域のサイズwidth100% height 100px 背景画像サイズ640ｘ435