Background Image Zoomed In On Iphone and Ipad Deviced

Store Design
1

Hello All. I am having an issued where the background image I am using looks great on laptop and android devices. But when loading the site on an iphone or ipad, the background image is zoomed in and looks horrible. I have looked around and tried different coding but to no avail. I have looked on the forums and seen that others have had this problem as well and there were some solutions thrown out there but it did not work for me. Any help would be appreciated.

website is loveandlustlingerie.com

This is what I have right now

.gradient {
background: var(–gradient-background);
background-attachment: fixed;
background-color: transparent !important;
background-position: center center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-image: url(https://cdn.shopify.com/s/files/1/0579/5587/6979/files/imageedit_4_3808835523.webp?v=1678982454);
}

Thanks in advance

2

Hi @Kenkash

This is BSS Commerce - Full-service eCommerce Agency. We’d love to suggest you this solution:

The phenomenon of wallpaper being enlarged on iPhone and iPad devices has been reported.

We suggest you read more about it here:

Cover Block: Fixed background causes image to be zoomed in on Safari browser in iPad and iPhone

Hope this can help you.

Kind regards,