Background Image shopify store, IOS issues

Background Image shopify store, IOS issues

chris1212
Visitor
2 0 0

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>

 

Replies 2 (2)

chris1212
Visitor
2 0 0

Here is the store URL: https://dugintheusa.com/

chrisredfiled1
Visitor
1 0 0

Thanks for the URL 

Regards:

Tierbestatter Albstadt