CODEWITHSUNDEEP
ioscssbackground-image
Hoàn Nguyễn
Hoàn Nguyễn

Reputation: 701

background-size: cover not working on iOS

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:

working

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

too big

Upvotes: 70

Views: 110851

Answers (9)

avinash sinha
avinash sinha

Reputation: 1

Broken background image

You can also try

background-size: contain;

fixed image

if it works for you as it worked for me, Thanks.

Upvotes: 0

Ryan Kimber
Ryan Kimber

Reputation: 495

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.

Upvotes: 6

cnmuc
cnmuc

Reputation: 6145

.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;
    }
}

Upvotes: 1

Adrien Esquerre
Adrien Esquerre

Reputation: 171

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;
}
}

Upvotes: 16

myworldbox
myworldbox

Reputation: 412

Change background-attatchment from fixed to scroll.

.yourClass {
    background-attachment: scroll;
}

Upvotes: 1

Matt Fiocca
Matt Fiocca

Reputation: 1618

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.

Upvotes: 96

Lind el Loren
Lind el Loren

Reputation: 115

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 :)

Upvotes: -2

Viktor Tabori
Viktor Tabori

Reputation: 2207

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

Upvotes: 83

FranCarstens
FranCarstens

Reputation: 1413

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.

Upvotes: 0

Related Questions