Background image doesn't show in iOS Chrome

Question

I've run into a peculiar issue: the background image of a div on my page works fine on my computers' web browsers, and works properly on Safari for iOS, but the latest version of Chrome (v46) for iOS does not show the image:

http://winstoncb.com/wp-content/themes/gridsby/test/test2.html

Further observations:

• No amount of time waiting on Chrome iOS helps – it never loads
• If I return to the home screen and then go back into Chrome again, the image is still not displayed
• If I return to the home screen, open another app (LinkedIn, Safari, etc.) and then return to home, and then return to Chrome... often the image DOES SHOW! However, it is finicky – and if I turn my phone to landscape mode the image disappears again. When I turn back to portrait it remains disappeared.

@media screen and (max-width: 500px) {
  div#hero {
    max-height: 400px;
    background: url('http://winstoncb.com/wp-content/themes/gridsby/images/WCB-rectangle2-low-mobile.jpg') no-repeat;
  }
}

@media screen and (max-width: 400px) {
  div#hero {
    background: url('http://winstoncb.com/wp-content/themes/gridsby/images/WCB-rectangle2-low-mobile.jpg') no-repeat;
    background-position: 37% top;
    max-height: 400px;
  }
}

/* HERO IMAGE */
div#hero {
  display: block;
  width: 100%;
  height: 500px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1500px;
  background: url('http://winstoncb.com/wp-content/themes/gridsby/images/WCB-rectangle2-low.jpg') no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: 37% top;
}
}

<div id="hero"></div>

This seems like an issue many people would have but I don't see much posted on it. Many thanks if you can point me in the right direction.

Winston

Answer 1

Thanks @Jan Vlcek, your answer got me on the right path. After more experimentation, I realized there were a few critical pieces here:

The most important thing that I didn't have before was the following meta tag in my head:

Without this, media tags for mobile have no effect.

Secondly, to address the primary problem – which is that the image wasn't showing up on my iPhone 6 – it helped to use max-device-width rather than max-width like you suggested.

Here are some other things that may have helped:

1) Put media queries after base styles.

2) Use (-webkit-min-device-pixel-ratio: 2) in the media query.

Answer 2

I have been playing with it for a moment and it seems that Chrome on iOS has a problem with scaling big images. The way you have written the CSS results in Chrome trying to display the image in original size 4097x2356px, not the mobile version.

When I updated the CSS so that Chrome on iOS loads the smaller size image, everything worked just fine.

Also, make sure you are placing your media queries after the base styles.

Updated CSS:

/* HERO IMAGE */
div#hero {
  display: block;
  width: 100%;
  max-width: 1500px;
  height: 500px;

  margin-left: auto;
  margin-right: auto;

  background: url('http://winstoncb.com/wp-content/themes/gridsby/images/WCB-rectangle2-low.jpg') no-repeat;

  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;

  background-position: 37% top;
}

/*
  max-device-width set to 1024px means that it will be used for all iPads and
  iPhones, including iPhone 6s plus
  @see http://stephen.io/mediaqueries/
*/
@media screen and (max-device-width: 1024px) {
  div#hero {
    background-image: url('http://winstoncb.com/wp-content/themes/gridsby/images/WCB-rectangle2-low-mobile.jpg');
  }
}

Answer 3

try this one

background: transparent url("http:your url/images/page-menu-background.png") no-repeat scroll 0% 0% / cover;