Background image zoomed in on iPhone

[carynk]

Hi! I've been trying all the solutions i could find to fix this problem but nothing works! So hopefully someone would be able to help me 🙂 

I am using an image for my website background (full page). It works perfectly on desktop and android but becomes super zoomed in and pixelated on iPhone. 

This is what it looks like on an iPhone:

This is what it's supposed to look like:

This is the code i'm using in "base.css":

.gradient {
background-image: url("https://cdn.shopify.com/s/files/1/0763/2335/6965/files/BG_with_noise_lo.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

@media (max-width: 767px)
.gradient {
background-image: url ("https://cdn.shopify.com/s/files/1/0763/2335/6965/files/BG_with_noise_lo_vertical.jpg");
background-attachment: unset;
}

[Hardik2903]

@carynk  Please provide website url

[carynk]

Hi, my website is sipsipsake.com

pw: Ftxp@2109

[BSS-TekLabs]

Hello @carynk 
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

[carynk]

Hi! my website is sipsipsake.com

Pw: Ftxp@2109

[namphan]

Hi @carynk,

Please change code:

@media (max-width: 767px)
.gradient {
background-image: url ("https://cdn.shopify.com/s/files/1/0763/2335/6965/files/BG_with_noise_lo_vertical.jpg");
background-attachment: unset;
}

=>

@media screen and (max-width: 749px) {
.gradient {
background-image: url ("https://cdn.shopify.com/s/files/1/0763/2335/6965/files/BG_with_noise_lo_vertical.jpg");
background-attachment: scroll !important;
}
}

[carynk]

Hi! Thanks but it didn't work, the image was only corrected in the header but not the rest of the website. 

[namphan · Accepted solution]

Hi @carynk,

Please change code:

@media screen and (max-width: 749px) {
.gradient {
    background: none !important;
}
body.gradient:before {
    content: '';
    background-image: url(/cdn/shop/files/BG_with_noise_lo.jpg);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}
}

[carynk]

This worked perfectly!! Thank you so much!

[namphan]

Hi @carynk,

If you have any questions, you can contact me directly.
Nice to meet you 😊