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;
}

Answer 1

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;