こちらのWEBサイトのように、「background-attachment: fixed;」を使うことで、背景画像を固定にすることができます。
※「background-attachment:fixed;」はiOSのブラウザでは上手く動かないので、注意してください。
background-attachment: fixed;で背景画像を固定する
HTML
<!-- first-v -->
<div class="first-v">
<p>background-attachment</p>
</div>
CSS
画像パスは自由に変えてみてください。
/* first-v */
.first-v {
position: relative;
background-image: url(../image/1.JPG);
background-size: cover;
height: 0%;
padding-top: min(100vh, 75%);
background-attachment: fixed;/* 背景画像を固定にする */
}
.first-v p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: max(4vw, 14px);
color: #fff;
}
