CSS changes not working on iPhones, but working on Android

Site URL: https://thunderfoxmusic.com

Hi, I'm pretty new to Custom CSS and have been using it based off the advice found on forums.

I'm trying to display a different fixed position background image for desktop and mobile for viewing optimisation. I've managed to get it working on desktop, and I got it working on mobile by placing a mobile-friendly background image behind the original background image, then coding for the foreground image to be transparent when viewed on mobile.

It works fine in the mobile preview in the site builder, and it also works fine viewed on android phones. It doesn't, however, appear to work on iPhones which just display the desktop optimized image but zoomed in significantly.

I've attached a screenshot of the view from an android (the one which fits the screen) and the view from an iPhone - below is the code that I'm using to achieve this (NOTE: I changed the 'max-width' paramater from 767 px to 950 px as I thought this might solve the issue but it hasn't. It also hasn't messed up the android view)

[data-section-id="5e4e0b259625b1547470a01f"] .section-background {
    background-image: url("https://images.squarespace-cdn.com/content/v1/5e4ce6ee2218e34cd31829d3/86c35289-8a3c-49d4-9d77-82583188abdf/ke17ZwdGBToddI8pDm48kHsP6h8ITLpzppVA9b8GOgt7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UQnys2-58Jn-eukW1UFae4kMRF6JsQQSjrbz6STkd2Ul9Aa7pjcgczeZz4RiAJynZQ/standing+seamless.jpg");
    background-size: cover;
    background-attachment: fixed;
}
@media only screen and (max-width:950px) {
[data-section-id="5e4e0b259625b1547470a01f"] .section-background img {
    visibility: hidden;
}
[data-section-id="5e4e0b259625b1547470a01f"] .section-background {
    background-image: url(https://static1.squarespace.com/static/5e4ce6ee2218e34cd31829d3/t/60ca068e80d4337c06eb2e36/1623852694300/standing+seamless+3to5+vertical+smaller.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
}

Thank you!!

Hi. Have you solved it yet?

No I have not