Tips and Tricks: Elementary CSS Hacks

Using Arial Black

Normaly you would use:

.something{
  font-family: "Arial Black", sans-serif;
}

But Firefoy on Windows will use "Arial" without "Black". Until you tell him the correct font-weight. By the way you should use "Gadget" as similar font if a device do not have "Arial Black":

.something{
    font-family: "Arial Black", Gadget, sans-serif;
    font-weight:900; /* Needed to Display Black in FF on Windows */

Backgrund Image Fixed and Covering

Normaly 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; 
}