今回は「headerの下に背景画像を敷く方法」について紹介します。
【CSS】headerの下に背景画像を敷く方法
完成形はこちら。
headerの下に背景画像（ファーストビュー）が敷いてあることが分かるでしょう。
※ PC版で見た方が分かりやすいと思います
HTML
<!-- header -->
<header class="header">
<div class="header__inner">
<div class="header__title">
<h1>タイトル</h1>
</div>
<div class="header__nav">
<ul>
<li><a href="">ナビメニュー</a></li>
<li><a href="">ナビメニュー</a></li>
<li><a href="">ナビメニュー</a></li>
</ul>
</div>
</div>
</header>
<!-- first-v -->
<div class="first-v"></div>
headerと背景画像のfirst-vを用意します。
CSS
/* header */
.header {
position: absolute;
width: 100%;
padding: 30px 7vw;
box-sizing: border-box;
}
.header__inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.header__title {
font-size: 25px;
}
.header__nav ul {
display: flex;
}
.header__nav ul li {
margin-left: 50px;
}
.header__nav ul li a {
text-decoration: none;
color: black;
}
/* first-v */
.first-v {
background-image: url(../image/bg.JPG);
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}
/* レスポンシブ */
@media (max-width: 600px) {
.header__nav {
display: none;
}
}
◎2行目〜7行目
headerの下に背景画像を敷くには、headerに「position: absolute;」を指定し、「width: 100%;」を指定して要素を伸ばします。
そして横幅が100％を超えないようにするために「box-sizing: border-box;」を指定すればOK。
まとめ
以上が、「headerの下に背景画像を敷く方法」でした。
