CSS Background-Size: Cover Replacement for Mobile Safari

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

How to set body background image as cover for ios devices

It should be background-size: cover; and not background-image. Also, you should be using browser prefixes as the property was released under CSS3 Specification¹..

body {
   background-image: url(#);
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
}

^1. Browser Support

Background size cover not working on longer pages on mobile

If I've understood correctly, you want the background image to at least fill the viewport but if the body is higher than that you want it to fill the whole body.

Therefore, tell it that the min-height of the body must be 100vh and don't set an actual height, let it work it out from the content.

I'm assuming in this snippet that you want just one copy of the background, centered and using size cover (so it may get cropped top/bottom or at the sides depending on relative aspect ratios).

A dummy div is put in the snippet to ensure we get scrolling.

body {
  background-image: url("https://via.placeholder.com/500");
  background-size: cover;
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  margin: 0;
  padding-left: 5vw;
  padding-right: 5vw;
  min-height: 100vh;
  width: 90vw;
  font-family: system-ui;
  overflow-x: hidden;
  font-size: 1.3rem;
}

div {
  height: 350vh;
}

<div></div>