「background-attachment: fixed;」で背景画像を固定する

こちらの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;
}