[Support request] Background showing blown up in iphone

[Kevin]

I have full page background with following css

body {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 100%, rgba(0,0,0,0.6) 0%), url(“bg.jpg”);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

It’s showing fine on desktop, android on all browsers but it’s not showing properly on iphones (any type of browser)
I have uploaded example of what it looks like on iphone vs android

[David]

Hi there,

the background-attachment: fixed; property is not supported on mobile browsers and on iOS there is a bug that results in the image being scaled up.

Remove that property and create a separate CSS rule that only applies to non-touch devices like so:

@media(pointer: fine){
    body {
        background-attachment: fixed;
    }
}

[Author]

Posts