background-size: cover not working on iOS

ios css background-image

89,295

Solution 1

This happens, particularly on iOS, when you have background-attachment:fixed. On mobile, I usually put background-attachment:scroll inside of a @media query.

As @RyanKimber pointed out, fixed attached images use the whole <body> size. On mobile this can get really tall which blows your image out. Setting the attachment back to scroll allows your cover image to stretch within its own container.

Solution 2

Elaborating on Ryan's answer, without adding any new html node or using @media queries, using only one css.

If you want to keep a cover sized fixed background on all the devices including iOS, without adding a new node, then the trick is to do the fixed positioning on the element (body) itself and not the background, since a fixed background and cover sizing messes up iOS.

It works in production like a charm on iOS as well: https://www.doklist.com/

This code won't work, since iOS uses the hight of the document and not the viewport:

body {
      background: url(https://www.w3schools.com/css/trolltunga.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

Now this is the magic, the body:after is fixed, and not the background:

body:after{
      content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
      background: url(https://www.w3schools.com/css/trolltunga.jpg) center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

I could have used the body itself, with "position:fixed;overflow-y:scroll", but I didn't want to mess with the positioning of the body and my overall layout.

So doing this on the body:after is a very easy fix. I have tested the solution on Mac, and iOS with firefox, safari, chrome.

I also created a github repo with 2 examples for this: https://github.com/thesved/fixed-cover-background

Solution 3

Here's an easy workaround so that the pictures in Safari browsers can be displayed normally (scroll only in Safari browsers instead of fixed in other media)

@supports ( -webkit-touch-callout : none) {
.selector {
background-attachment:scroll
}
}
@supports not ( -webkit-touch-callout : none) {
.selector {
background-attachment: fixed;
}
}

Solution 4

This caused me a number of problems as well. The problem is that iOS is using the full height & width of the body instead of the viewport to decide the size.

Our solution was to create a new <div class="backdrop"></div> .

We apply the background to this div and give it position: absolute; top: 0; bottom: 0; left: 0; right: 0.

Since this div is now the size of the viewport, background-size: cover works just fine.

Solution 5

Change background-attatchment from fixed to scroll.

.yourClass {
    background-attachment: scroll;
}

View more solutions

89,295

Author by

Admin

Updated on February 21, 2022

Comments

Admin 10 months

This is my code:

background-color:#fff;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center center;

It's working on desktop, iPad and Android mobile: