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:
This happens 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.
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
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.
This post answers your questions: 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.
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 :)