视差：背景移动以显示重复

Question

我有一个内置于Bootstrap 4中的网站，当前使用简单的视差js / css在主页上创建部分。除最后一节外，它似乎在所有部分上均能完美工作，因为背景基本上没有显示，因此您可以看到背景重复。每个CSS都一样，背景图片大小也一样。我无法找到解决方案。 The draft site

<style>
.parallax {
  height:350px;
}
.paralax-static{
  height:350px;
}
        section.module.parallax-1 {
  background-image: url("assets/img/parallax/parallax_1.jpg");
  background-position: 50% 0;
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: cover;
  /* background-color: rgba(0,123,255,0.4); */
  background-blend-mode: screen;
  }        section.module.parallax-2 {
  background-image: url("assets/img/parallax/parallax_2.jpg");
  background-position: 50% 0;
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: cover;
  /* background-color: rgba(0,123,255,0.4); */
  background-blend-mode: screen;
  }        section.module.parallax-3 {
  background-image: url("assets/img/parallax/parallax_3.jpg");
  background-position: 50% 0;
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: cover;
  /* background-color: rgba(0,123,255,0.4); */
  background-blend-mode: screen;
  }
  .parallax-container h2 span {
      font-size:100px!important;
      /* color:#f7971e; */
      color:#ffffff;
      position: absolute;
      margin-top:100px;
      text-shadow:1px 1px 10px #000, 1px 1px 10px #000;
  }
  </style>

HTML：

    <section class="module parallax parallax-1 d-none d-md-block d-lg-block d-xl-block" data-type="background" data-speed="10">
        <div class="parallax-container">
            <h2 class="mx-auto d-flex justify-content-center"><span>Fitness</span></h2></span>
        </div>
    </section>
    <section style="max-height:350px;overflow:hidden;" class="d-sm-block d-md-none"> 
        <img src="assets/img/parallax/parallax_1.jpg" class="img-fluid" />
    </section>

使用jQuery 3在文档末尾使用JS：

$(document).ready(function(){
  var $window = $(window);
    $('section[data-type="background"]').each(function(){
        var $bgobj = $(this); // assigning the object

        $(window).scroll(function() {
            var yPos = -($window.scrollTop() / $bgobj.data('speed')); 

            // Put together our final background position
            var coords = '50% '+ yPos + 'px';

            // Move the background
            $bgobj.css({ backgroundPosition: coords });
        }); 
    });