Tukukkk

I have a website built in Bootstrap 4 that currently uses a simple parallax js/css to create sections on the homepage. It seems to work perfectly on all but the last section, where the background is off substantially so that you can see the background repeating. The CSS is the same for each, as is the background image size. I have not been able to find a solution. 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>

JS at end of document using jquery 3:

$(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 });

        }); 

    });