背景画像を画面いっぱいに表示する
ある要素いっぱいに画像が表示されているものをよく見かけます。これを実現するCSSは「background-size:」です。
background-sizeの値には、contain、cover、autoがあります。
- contain：画像を切り取ったり縦横比を崩さず、画像ができるだけ大きくなるよう拡大縮小します。要素からはみ出しません。
- cover：画像の縦横比を崩さず、画像ができるだけ大きくなるよう拡大縮小します。画像の縦横比が要素と異なる場合、画像のはみ出している部分を切り取ります。
- auto：縦横比が維持されるように、適切な方向に背景画像を拡大縮小します。
具体的な使用方法
div要素に.topクラスをつけて、背景画像を以下のように指定します。
CSS
.top{
background-image:url(https://XXXXXXXXXXXX.png);
background-size:cover;
}
