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.