100% width background image top cut off
<p>When I use the following with a 1920x1080 pic (or for other resolutions I've tried), the very top of the picture gets cut off. Is there any way to prevent this? </p>

<pre><code>div.background {
    background-image: url("/images/home.jpg");
    background-repeat: no-repeat;
    position: absolute; 
    height: 100%; 
    width: 100%;
    margin-top: 100px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    background-position: 50% 50%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;
}

div.header {
    background-color: red;
    width:100%;
    height: 100;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    padding: 0px 0px 0px 0px;

}

body {
    margin: 0px 0px 0px 0px;
}

&lt;html&gt;
&lt;head&gt;
&lt;link rel="stylesheet" type="text/css" href="css/main2.css"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="header"&gt;&lt;/div&gt;
&lt;div class="background"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>