Mobile-view with custom CSS BG, repeats with a smaller version of the image at the bottom (HELP!)

I inserted a custom CSS template to allow for multiple versions of a background. When in mobile view, it repeats, scrolling down to a smaller version of the image. How do I remove this? My code is inserted only inside the advanced section of the homepage. This is my code: 

<style> 
  #header, #footer { 
    display: none;
  } 
  a {
    filter: brightness(0) invert(1);
  }
  a:hover{
       filter: brightness(1) invert(0);
  }
  .sqs-block-button-element--small{background-color:transparent!important; background-size:contain!important; background-position:center;background-repeat:no-repeat!important;border-width:0!important;}
  
  @media only screen and (max-width: 768px){
     .fluidImageOverlay, img {
       display:none !important;
     }
    .section-background img {
        opacity: 0;
    }
    .section-background {
        background-image: url(https://static1.squarespace.com/static/645ad34ac7b0c30c47d1dccb/t/64650dbff2315e7e487074de/1684344255551/cc_bg_mobile.png);
          background-size: cover;
          background-position: top;
        background-repeat: no-repeat !important;
    }
}
</style>

Can you share page url? We can check problem easier.