Background Image Mobile Scaling

Can anyone tell me why my page background image isn't scaling on mobile?

I'm currently using code:

#collection-5c4a1df9575d1fe4bb06e353 .Main{background-image: url("https://static1.squarespace.com/static/5c478e47620b85be0b006e2b/t/5defdb6fa155287db41e9c05/1576000374889/staff_bg.jpg");
  height:100%;
  background-attachment: fixed;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}

Page: https://blenny-oarfish-24kk.squarespace.com/ourstaff

Password: blenny

There seems to be a problem with background-attachment and background-size on iOS devices. For now I've just removed the background altogether on mobile. If anyone knows of a solution, I'd like to implement it later.

Following - I cannot find the answer to this on the entire internet.

It must be so simple to resize bg images for mobile.