Shopify, Background Image and Functionality not working IOS devices

[FahadKhan]

I just want to fix the issue on all iOS devices. As you can see, the view on Android, laptop, and PC is perfect, but when you open the store on iOS, you will find the issue I'm talking about. On the homepage, you will see the background image and functionality work perfectly on Android. I want the same on all iOS devices too.

On iOS devices, the image is zoomed in and the functionality is not working as it does on Android, laptop, and PC.

here is the Store URL: https://dugintheusa.com/

here is the code: I am using this code in custom liquid, liquid code

<style>
main#MainContent {
background: var(--gradient-background);
background-attachment: fixed;
background-color: transparent !important;
background-position: center center !important; /* Center the background image */
background-image: url(https://cdn.shopify.com/s/files/1/0617/3920/4773/files/Untitled_design_0284d114-305d-4fb0-8d7f-ca42c...) !important; /* Desktop background image */
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover; /* For iOS */
}

main#MainContent .gradient {
background: transparent !important;
}

@media screen and (max-width: 467px) {
main#MainContent {
background-attachment: fixed !important; /* Use fixed for better compatibility on iOS */
background-size: cover !important; /* Ensure the image covers the background */
-webkit-background-size: fixed !important; /* For iOS */

background-position: center center !important; /* Center the background image */
background-image: url('https://cdn.shopify.com/s/files/1/0617/3920/4773/files/Untitled_design_9483438f-7ef8-417d-aea2-b91bf...') !important; /* Mobile background image */
}
}

@media screen and (min-width: 468px) {
main#MainContent {
background-attachment: fixed !important; /* Use fixed for larger screens */
}
}
</style>

[namphan]

Hi @FahadKhan,

The "background-attachment: fixed" is not supported on IOS, so it will cause error when you want to use it. Refer link

Therefore, you need to remove it for mobile and everything will work fine