Unwanted white space on mobile view-CodePudding

I have the problem that on my website, when I scroll fast on mobile, the background image moves up a bit and a white space at the bottom appears, and then disappears again when I stop scrolling. I've tried a bunch of solutions to similar problems to prevent this from happening, but I haven't been able to solve it so far.

Here's the my css for the background image:

html {
  background: url(bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

And a screenshot of the issue:

CodePudding user response：

Try adding the background img to the body aswell like this:

html, body {
  background: url(bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

CodePudding user response：

Try this code for mobile to the background image show all sides clear images but if your image is big then the image is stretched so first, you need to create a div container to fit your image into the div container.

 html, body {
    background: url(bg.jpg) no-repeat center center fixed;
    background-size: 100% 100%;
}