Full Page Background Image on Chrome for Android

A recent small project involved building a holding page with a background image covering the whole window. A quick internet search produced this article from CSS Tricks with a range of solutions.

The first solution ‘Awesome, Easy, Progressive CSS3 Way’ was suitable and displayed fine mostly everywhere, except on Chrome on some Android Devices:

* {
    margin: 0;
    padding: 0;
}

html {
    background: url(bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

To get it to work in Chrome for Android a height: 100% is added:

html {
    height:100%;
    background: url(bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Internet Explorer⌗

The article covers adding support ( via this article ) for Internet Explorer by adding IE Filters:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg',sizingMethod='scale');
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";

As mentioned, the first line is for versions previous to IE8.

The second line affects both IE8 and IE9. IE9 does work without this but the image is scaled differently compared to other browsers.

IE10 and above do not require them (they also axed support for IE Filters starting with IE10).

Finished example