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.

Answer 2

Add an overflow:auto; to resolve this issue.

For Instance,

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

Hope this helps.

Answer 3

Perhaps you can also try using:

background-size:100% 100%;

just a suggestion

Answer 4

It's 2021 and I encountered a similar problem and none of the solutions worked for me.

I managed to figure it out and hope this will help someone.

You will need to set the viewport height and width to 100%. According to w3schools , The viewport is the user's visible area of a web page. This will eliminate any white spaces by setting the minimum height to that.

height: 100vh;
width: 100vw;