背景を固定した状態でコンテンツをスクロールする

main要素をラッパーに、div要素でcontentを配置。
固定表示するコンテンツには「.cd-fixed-bg」、スクロールするコンテンツには「.cd-scrolling-bg」と入れ子のdivを加える。

<main>
    <div class="cd-fixed-bg cd-bg-1">
        <h1>見出し</h1>
    </div> 
  
    <div class="cd-scrolling-bg cd-color-1">
        <div class="cd-container">
            <p>
                コンテンツ
            </p>
        </div> 
    </div>
 
    <div class="cd-fixed-bg cd-bg-2">
        <h1>見出し</h1>
    </div> 
  
    <div class="cd-scrolling-bg cd-color-2">
        <div class="cd-container">
            <p>
                コンテンツ
            </p>
        </div> 
    </div> 
</main>

一つのdivのコンテンツは表示高さいっぱいに配置されるよう設定します。
背景は通常はコンテンツと一緒にスクロールしてしまうので、「.cd-fixed-bg」の背景を「background-attachment」で固定表示させます。あとは各背景の画像やベタ塗りを指定する。

body, html, main {
    /* important */
    height: 100%;
}
  
.cd-fixed-bg {
    min-height: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
}
  
.cd-fixed-bg.cd-bg-1 {
  background-image: url("../img/cd-background-1.jpg");
}
.cd-fixed-bg.cd-bg-2 {
  background-image: url("../img/cd-background-2.jpg");
}
.cd-fixed-bg.cd-bg-3 {
  background-image: url("../img/cd-background-3.jpg");
}
.cd-fixed-bg.cd-bg-4 {
  background-image: url("../img/cd-background-4.jpg");
}
  
.cd-scrolling-bg {
    min-height: 100%;
}

参考サイト

colice

[CSS]背景を固定させ、カーテンをあげるようにコンテンツを次々にスクロールで表示させるテクニック

http://coliss.com/articles/build-websites/operation/css/css-alternate-fixed-scroll-backgrounds-by-codyhouse.html