ファーストビューの背景高さを画面に合わせ可変させる方法
「ページを開いた時に画面いっぱい写真 / イラストにしたい！」時に使える背景画像の設定を解説します。
HTML
<div class="main-content">
<div class="background-image"></div>
</div>CSS
body{margin: 0}
.wrapper{ padding:200px 0;text-align:center; }
/*使うのはここから*/
.main-content {
position: relative;
}
.background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('bg-flower.jpg');
background-repeat: no-repeat;
background-size: cover;
z-index: -1; /* 背面に配置 */
}
.main-content {
min-height: 100vh; /* 画面の高さに合わせる */
box-sizing: border-box;
padding-bottom: 100px; /* フッターの高さ分をマージン */
}背景画像の細かい調整
background-sizeプロパティでは以下のいずれか 1 つの方法で指定できます。
「cover」「contain」「100% auto」「auto 100%」
- cover
枠に合わせて隙間ができないように調整
background-repeat: no-repeat;と合わせて使わないと繰り返し表示されるようになります。 - contain
画像が枠からはみ出ないように調整 - 100% auto
横幅を枠に合わせる - auto 100%
高さを枠に合わせる
