Fixed custom background for mobile

Site URL: https://www.rsfxx.com

I applied some custom CSS to the WELLS template in order to add a custom background , on the desktop the background is fixed like we want it to be, on the mobile preview editor on the desktop its also fixed but on the iPhone/iPad It scrolls. Does anyone know how to get it fixed on mobile as well? Thanks 

Current code being used

body {background: url(https://static1.squarespace.com/static/5b5d8216da02bc91831c95ab/t/5c3d904121c67cb9c5e0f5cb/1547538498155/Site+Background1.jpg) repeat center center fixed; -webkit-background-size: auto; -moz-background-size: auto; -o-background-size: auto; background-size: auto;}

 @media only screen and (max-width: 800px) {
    #mobileNav a, { 
    font-size: 20px !important;
        color: #ffffff !important;
 line-height: 1em !important;
      text-align: left;
      margin-left: 15px;
  }
  #mobileNav {
  background-color: #000000;
      }
   }
#mobileMenuLink a {
    color: white !important;
font-size: 18px !important;}

bump...

If you share site url, we can check easier

https://paddlefish-saffron-nn8z.squarespace.com/

pass:  123456

on the request quote page.  I will have a background image on all pages.  I want them them to stay fixed while the content scrolls over it the background.  IF it cannot be done with just with Custom CSS, I'm open to using JavaScript.

I've tried the code below, works fine on desktop...but on mobile the content does not scroll OVER the background the background image scrolls with the text.

body#collection-blockname .main-content {
    background-image: url(URL HERE);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100vw auto;
    background-position: center center;
}

@media only screen and (max-width: 767px) {
body#collection-blockname .main-content {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 200vw auto;
    background-position: center top;}
}

Thanks!