Background does not spans entirely

Question

I had made css pre-loader which has a some-colored background and a bouncing ball. The background however doesn't spans the window entirely.The page before which the preloader appears is scrollable, and when I try to reload the page, the preloader background doesn't cover the entire page, but only till the window size from the top. The preloader code was mentioned in this question: Preloader does not fade out online Help appreciated.

Answer 1

Change position: absolute; to position: fixed; and add width: 100%;.

If it doesn't fill the whole page use height: 100vh; instead of a percentage value.

So #loader should look something like this:

#loader  {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  background-color: #0f2338;
  z-index: 99;
}