Why Does CSS Background-Size: Cover Not Work in Portrait Mode on iOS

why does CSS background-size: cover not work in portrait mode on iOS?

While checking orientation please take note of these points from apple document -

Provide Launch Images :

iPhone-only applications may only have one launch image. It should be in PNG format and measure 320 x 480 pixels. Name your launch image
file Default.png.

iPad-only applications: Create a launch image for each supported orientation in the PNG format. Each launch image must be 1024 x 748
pixels (for landscape) or 768 x 1004 pixels (for portrait).

Universal applications: Include launch images for both iPhone and iPad.

Update Your Info.plist Settings Specify values for the UISupportedInterfaceOrientations and UIInterfaceOrientation

and

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

Here are some other resources I also came across while looking for a solution: Flexible scalable background images, full scalable background images, perfect scalable background images, and this discussion.

background-size: cover does not cover mobile screen

After hours of trying different things, adding min-height: 100%; to the bottom of html under the { background:... } worked for me.

CSS background-size: cover replacement for Mobile Safari

I've had this issue on a lot of mobile views I've recently built.

My solution is still a pure CSS Fallback

http://css-tricks.com/perfect-full-page-background-image/ as three great methods, the latter two are fall backs for when CSS3's cover doesn't work.

HTML

<img src="images/bg.jpg" id="bg" alt="Sample Image">

CSS

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspect ratio */
  min-width: 100%;
  min-height: 100%;
}

background-size: cover looks pixelated on retina display

It's because you are using background-attachment:fixed - for whatever reason this when used with background-size: cover on iOS causes this behavior. (I had this same bug at http://jag.is and just resolved it today).

So if you add the following it should be resolved:

/* for background-size:cover replacement on iOS devices */
@media only screen and (orientation: portrait) and (device-width: 320px), (device-width: 768px) {
    header {
      -webkit-background-size: auto 150%;
      background-attachment: scroll;
    }
}
@media only screen and (orientation: landscape) and (device-width: 320px), (device-width: 768px) {

    header {
      -webkit-background-size: 150% auto;
      background-attachment: scroll;
    }
}

The -webkit-background-size property is for iOS as well because it doesn't recognize the cover property for background-size

Here's the article I found my solutions from.

Lovely site design BTW.

CSS background images resizing incorrectly on iPad and iPhone.

I had the same issue, I used SCROLL instead of FIXED.

background-attachment:scroll;

background-size cover not maintaining aspect ratio, android chrome

I had a similar issue and it was pretty difficult to debug, but eventually I managed to find the reason: image pixel size.

TL;DR
Don't use big sized images, mobile devices don't like em, use max 2000px wide pics.

---

Few more details

Simply put, mobile devices can't handle big sized images, depending on model and OS.
The results may vary: some may simply break, others display a blank image or distortions like the one in this question, and sometimes even return a 404 error! (been there, done that).

I've found info on this issue in many places here on SO and elsewhere on the web, a good article is this with a nice tool to calculate image size:

http://www.williammalone.com/articles/html5-javascript-ios-maximum-image-size/.

The ideal image size to use shouldn't be more than 2000px from my tests, mostly to support the largest (and oldest too) part of mobile devices, but it's recommended to test out depending on your needs.

How to use a responsive background image that centers differently in both portrait & landscape?

You're gonna have to use medias queries to detect the resolution of the device. For example, to detect a mobile in portrait mode with max 480px :

@media only screen and (max-device-width: 480px) and (orientation: portrait) {
}

Then you're gonna have to change the background-size: cover. That property don't let you change the position of the image since it uses the best configuration possible to cover the entire space.
You're gonna have tweak the numbers to fit your image. For example, if your image is a landscape (width > height), use :

background-size: auto 100%;

This will make the image fill up the entire height.
You can then place it using background-position. For example, top have your image align to the left :

background-position: left top;

---

Related Topics