background images don't show/are stretched on iPad or iPhone

Question

I have a website on github pages, which works perfectly on any desktop browser. However, two of my background images will not show up on mobile devices (I've only tested iPad and iPhone, it could just be IOS). I have tried adding media queries to make sure the background-attachment property is set to scroll on handheld devices (I had read this was sometimes the problem). I also have media queries that ensure the images are not too large to load. Here is my html:

<div id="image-1" class="background-image"></div>
<div id="image-2" class="background-image"></div>

Here's the css:

#image-1 {
  background-image: url('imgs/coding.jpg');
}
#image-2 {
  background-image: url("imgs/game.JPG");
}
@media only screen and (min-width: 500px) {
    /* For mobile phones: */
    #image-1 {
      background-image: url("imgs/coding-large.jpg");
    }
    #image-2 {
      background-image: url("imgs/game-large.jpg");
    }
}
@media not handheld {
    .background-image {
      background-attachment: fixed;
    }
}
.background-image {
  opacity: 0.8;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: 100% 100vh;
  height: 85vh;
}

If I change 100vh to 100%, then the images load, but they are terribly stretched vertically. Any suggestions?

score 4 · Accepted Answer · edited May 23 '17 at 12:25

You can either:

use a fixed position, with a background position center center: see "CSS background-size: cover replacement for Mobile Safari".
This page refers to a background-attachment: fixed; as well, while remining use that viewport values (such as vh and vw) are technically supported on iOS 7 but simply do not work, hence the rodneyrehm/viewport-units-buggyfill project.
or (less elegant), use fixed size for media with a given size: see "Background image not displayed properly on iPad and iPhone"

score 2 · Answer 2 · edited May 23 '17 at 11:53

Seems iPhones disregard @media rules for handheld devices (See here Do iPhone / Android browsers support CSS @media handheld? ). And giving background-size property of 100% 100% will make the image stretched if the image is not square.

So you can use max-width media query to detect mobile devices and set background-attachment as scroll. And either use background-size: cover or background-size: 100% auto

score 0 · Answer 3 · answered Mar 07 '17 at 04:58

It looks like you have competing heights with your background-size attribute and your background height attribute. Check out CSS-Trick's post on background-sizes for a better implementation. Since it looks like you want to cover the width of the page with the images, go with background-size:cover instead. Hope this helps.

score 0 · Answer 4 · answered Mar 07 '17 at 05:00

Use this

/* Image is centered vertically and horizontally at all times */
background-position: center center;

/* Image doesn't repeat */
background-repeat: no-repeat;

/* Makes the image fixed in the viewport so that it doesn't move when
the content height is greater than the image height */
background-attachment: fixed;

/* This is what makes the background image rescale based on its     container's size */
background-size: cover;

background images don't show/are stretched on iPad or iPhone

4 Answers4