Background-Size: Cover Not Working 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.

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

CSS

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

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

background-size: cover breaks in Safari but not Chrome

I think this has nothing to do with background-size:cover which is totally supported on Safari, and more to do with the fact that your web server is sending out the images with the wrong content-type. All images show up as txt in my console, while this doesn't happen on other websites.

Source: I (probably) have the same setup as you. Macbook Air, Safari, macOS High Sierra 10.13.6.

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.

---

Related Topics