css3 background-size:cover leaving white space on resize

Question

body {
    margin:0;
    padding:0;
    position:relative;
    background:url(../images/imgs/backgrnd.png) no-repeat;
    background-size:cover;
}

The background-size:cover works perfectly for the most part and resizing is generally not a problem, but in some cases it leaves a large white strip down at the bottom of the page on some resizes.
The background is a 1920x1080 image

Answer 1

Not sure if you solved this problem, but I was tearing my hair out over it for a couple of days and nothing I could Google was helping. I talked to someone at work on our UI team and it turns out that the body of the web page won't necessarily cover the whole height of the page. Adding the following to my css file completely solved the problem:

html {
    height: 100%;
}

body {
    background-size: cover;
    height: 100%;
}

This stretches the content of the body to fit the whole height of the window. Just including the "body" bit worked for me, but my coworker informed me that it's better to include both because some browsers will act funny with just one.