スクロールしても背景固定

参考サイト
参考デモ

html

<div class="fixed-bg bg01">
    <h1>見出し</h1>
</div>

<div class="scroll-bg bg-color01">
    <p>コンテンツ</p>
</div>

<div class="fixed-bg bg02">
    <h1>見出し</h1>
</div>

<div class="scroll-bg bg-color02">
    <p>コンテンツ</p>
</div>

背景画像をつけるセクションに「background-attachment: fixed」を設定する

css

.fixed-bg {
  min-height: 100vh;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.bg01 {
  background-image: url(../images/bg01.jpg);
}

.bg02 {
  background-image: url(../images/bg02.jpg);
}