Tips and Tricks: Elementary CSS Hacks

Backgrund Image Fixed and Covering

Normally you would use:

html,body {
    height:100%;
    width:100%;
    padding:0;
    margin:0;
}    
body {
    background: url(image.jpg) no-repeat center center fixed; 
    background-size: cover; 
}

But:

1. Android/Mobile WebKit Browser have a bug, so fixed Background will not work. Seen on Galaxy SII and some strange behaviour on iPad Mini. There is no bugfix but a combination of overflow- and some other stetements make it working.
2. Some Browser do not know the keyword "cover", but they work with "100%".

All together you should always use:

html,body {
    height:100%;
    width:100%;
    padding:0;
    margin:0;
}    
html {
    overflow-y: hidden; /* Bugfix Android Fixed Background */
}
body {
    overflow-y: scroll; /* Bugfix Android Fixed Background */
    background-color: #000000; /* Bugfix Android Fixed Background */
    background: url(image.jpg) no-repeat center center fixed; 
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}