I'm trying to have a background image to cover the whole screen. This is my css (sass):

```
.html {
    height: 100%;
}

.body {
    height: 100%;
    font-family: $font-sans-serif;
    background: $white;
    font-size: 16px;
    line-height: 1.6;
    color: darken(#ccc, 8%);
}

.masterhead {
    position: relative;

    width: 100%;
    height: 100%;
    min-height: 35rem;
    padding: 15rem 0;
    background: url(../images/bg_3.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

```

But the background does not have to total screen size. When I set ´position´ to ´fixed` it works but then I cant scroll to see the elements below it anymore.

What am I doing wrong?