background-size: cover not working on iOS

Ios Problem Overview

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:

On Chrome and Safari on iPhone, the background is too big:

Ios Solutions

Solution 1 - Ios

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 - Ios

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 - Ios

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 - Ios

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 - Ios

Change background-attatchment from fixed to scroll.

.yourClass {
    background-attachment: scroll;
}

Solution 6 - Ios

.imageDiv {
	background: url('image.jpg') center center no-repeat fixed;
	background-size: cover;
}

@supports (-webkit-touch-callout: none) {
	.imageDiv {
		background: url('image.jpg') center top no-repeat scroll;
		background-size: auto 100vh;
	}
}

Solution 7 - Ios

This post answers your questions: https://stackoverflow.com/questions/12599234/why-does-css-background-size-cover-not-work-in-portrait-mode-on-ios

Not all browsers recognize the cover keyword for background-size, and as a result, simply ignore it.

So we can overcome that limitation by setting the background-size to 100% width or height, depending on the orientation. We can target the current orientation (as well as the iOS device, using device-width). With these two points I think you can use CSS background-size:cover on iOS in portrait-mode

See that post for more resources.

Solution 8 - Ios

Try this:

background: url( /gfx/background.jpg  ) no-repeat top center fixed; 
background-size: 100vmax 100vmax;

As mentioned before, "cover" will cover document height, not view height. Most of the units will not work as expected hence vmax.

Not really cover, does the job with squared images :)

Content Type	Original Author	Original Content on Stackoverflow
Question	Hoàn Nguyễn	View Question on Stackoverflow
Solution 1 - Ios	Matt Fiocca	View Answer on Stackoverflow
Solution 2 - Ios	Viktor Tabori	View Answer on Stackoverflow
Solution 3 - Ios	Adrien Esquerre	View Answer on Stackoverflow
Solution 4 - Ios	Ryan Kimber	View Answer on Stackoverflow
Solution 5 - Ios	myworldbox	View Answer on Stackoverflow
Solution 6 - Ios	cnmuc	View Answer on Stackoverflow
Solution 7 - Ios	FranCarstens	View Answer on Stackoverflow
Solution 8 - Ios	Lind el Loren	View Answer on Stackoverflow