https://shu-naka-blog.com/css/parallax_css/

<!--固定背景01-->
<div class="cd-fixed-bg cd-bg-1">固定背景01</div>

<!--コンテンツ-->
<div class="area">
  <p>【CSS】でスクロール時に背景画像が切り替わるパララックス</p>
  <h2>SHU BLOG<h2>   
</div>

<!--固定背景01-->
<div class="cd-fixed-bg cd-bg-1">固定背景01</div>

/*画面全体の設定*/
body,
html {
  height: 100%;
  margin: 0 auto;
}

/*--コンテンツ設定--*/
.area {
    background-color: #ffffff;
    overflow: hidden;
    width: 100%;
    padding: 5% 0;
}

/*--固定背景の設定--*/
.cd-fixed-bg {
　position: relative;
　min-height: 100%;
　background-size: cover;
　background-attachment: fixed;
　background-repeat: no-repeat;
　background-position: center center;
　z-index: 2;
}

/*--固定背景01--*/
.cd-fixed-bg.cd-bg-1  {
  background-image: url('画像パス');
}

<!--コンテンツ01-->
<div class="area">
  <p>【CSS】でスクロール時に背景画像が切り替わるパララックス</p>
  <h2>SHU BLOG<h2>   
</div>

<!--固定背景01-->
<div class="cd-fixed-bg cd-bg-1">固定背景1</div>
 
<!--コンテンツ02-->
<div class="area">
  <p>【CSS】でスクロール時に背景画像が切り替わるパララックス</p>
  <h2>background02<h2>   
</div>

<!--固定背景02-->
<div class="cd-fixed-bg cd-bg-2">固定背景2</div>

/*--一部省略--*/
/*--固定背景の設定--*/
.cd-fixed-bg {
    position: relative;
    min-height: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 2;
}

/*--固定背景01--*/
.cd-fixed-bg.cd-bg-1  {
  background-image: url('画像パス');
}

/*--固定背景02--*/
.cd-fixed-bg.cd-bg-2  {
  background-image: url('画像パス');
}

<!--固定背景01-->
<div class="cd-fixed-bg cd-bg-1">
  <h2>TITLE01</h2>
</div>

<!--固定背景02-->
<div class="cd-fixed-bg cd-bg-2">
  <h2>TITLE02</h2>
</div>

<!--固定背景03-->
<div class="cd-fixed-bg cd-bg-3">
  <h2>TITLE03</h2>
</div>

<!--固定背景04-->
<div class="cd-fixed-bg cd-bg-4">
  <h2>TITLE04</h2>
</div>

/*--一部省略--*/
/*--固定背景の設定--*/
div {
  box-sizing: border-box;
  color: #FFF;
  font-size: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 5%;
}

h2 {
    font-family: 'Impact';
    font-size: 55px;
    text-align: center;
}

.cd-fixed-bg {
    position: relative;
    min-height: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 2;
}

/*--固定背景01--*/
.cd-fixed-bg.cd-bg-1  {
  background-image: url('画像パス');
}

/*--固定背景02--*/
.cd-fixed-bg.cd-bg-2  {
  background-image: url('画像パス');
}

/*--固定背景03--*/
.cd-fixed-bg.cd-bg-3  {
  background-image: url('画像パス');
}

/*--固定背景04--*/
.cd-fixed-bg.cd-bg-4  {
  background-image: url('画像パス');
}

@media screen and (max-width: 736px) {
	.cd-fixed-bg {
		background-size: cover;
		background-attachment: scroll;
	}
}

var parallaxBkImg = function(){
   $(window).on('load resize', function() {
     $(window).on('load scroll', function(){
       var $winTop = $(window).scrollTop();
       var $target = $('.cd-fixed-bg');
       var $winWidth = $(window).width();
       if($winWidth < 736) {
         $target.each(function(index){
           var $position = $winTop - $target.eq(index).offset().top;
           if($winTop > $target.eq(index).offset().top - 800) {
             $target.eq(index).css({
               'background-position-y': $position * .4
             });
           }
         });
       }
     });
   });
 }();

• 「background-attachment: fixed;」は背景画像が固定されスクロールしない。 • レスポンシブにする際には「background-attachment: scroll;」に変更する • iOSにはjQueryを対応させる