ブロックによる背景画像

実現したいこと

下記に、リンクを貼ったサイトの様なものを作りたく、実行してみたのですが、画像サイズが違うので参考サイトの様に行きませんでした。
参考サイト

試したこと

画像が画面一面に表示され、とても拡大された画像だった為、以下のコードで画像を調整しました。

css
1background-size: contain;

結果

画像が表示されたのですが、同じ画像が枠内に複数枚表示されました。

コード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>Document</title>
8</head>
9<body>
10        <div class="fixed-bg bg01">
11                <h1>見出し</h1>
12            </div>
13            
14            <!-- 切り替え -->
15            <div class="scroll-bg bg-color01">
16                <p>コンテンツ</p>
17            </div>
18             
19            <!-- 切り替え -->
20            <div class="fixed-bg bg02">
21                <h1>見出し</h1>
22            </div>
23             
24            <!-- 切り替え -->
25            <div class="scroll-bg bg-color02">
26                <p>コンテンツ</p>
27            </div>
28<style type="text/css">
29.fixed-bg {
30  min-height: 100vh;
31  background-attachment: fixed;
32  background-size: cover;
33  background-position: center;
34}
35 
36.bg01 {
37  background-image: url(170923.jpg);
38  background-size: contain;
39  }
40 
41.bg02 {
42  background-image: url(../images/bg02.jpg);
43}
44</style>
45        </body>
46</html>