Archived topic
Background showing blown up in iphone
1 reply · Started by Kevin on June 8, 2022
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
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;
}
}