Full Background with dot matrix overlay

This is a great way to reduce the background image quality to a minimum without destroying your eyes. (Using background-size: cover is good for new browsers)

by Emmanuel Garcia

HTML

<div id="dot-matrix"></div>
<img class="background-image" src="http://placekitten.com/500/500">

CSS

.background-image {
    height:auto;
    left:0;
    min-height:100%;
    min-width:1024px;
    position:fixed;
    top:0;   
    width:100%;
    z-index: -1
}

#dot-matrix {
    background: url(http://s14.directupload.net/images/111129/44ga9qid.png);
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1
}

/* This is fancy. not important */

#content {
    z-index: 9999;
    position: relative;
    margin: auto;
    width: 60%
}

p {
    background: rgba(0, 0, 0, 0.3);
    color: tomato;
    font: normal normal bold 4.4em/1.1 Helvetica, sans-serif;
}