David - Musings of an SRE

Chrome Android and background-size: cover not playing nice

Quick note that I’ve discovered when working with full-screen background images not sizing up itself properly in portrait mode on Android’s Chrome.

html {
  background: asset-url('supercoolbackground.jpg', image) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Normally, that’s all we need to do. Works perfectly on most modern browsers on the desktop.

But when we get to the mobile web, it ends up looking more like this.

There’s a whole bunch of whitespace.

A solution that worked for me is to add

html {
 height:100%;
 min-height:100%;
}

Seems like the mobile browser needs an explicit height setting for it to work.