title: Background image doesn't show in iOS Chrome
body: <p>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:</p>
  
  <p><a href="http://winstoncb.com/wp-content/themes/gridsby/test/test2.html" rel="nofollow">http://winstoncb.com/wp-content/themes/gridsby/test/test2.html</a></p>
  
  <p>Further observations:</p>
  
  <ul>
  <li>No amount of time waiting on Chrome iOS helps – it never loads</li>
  <li>If I return to the home screen and then go back into Chrome again, the image is still not displayed</li>
  <li>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.</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@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;
  }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="hero"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>
  
  <p>Winston</p>