CSS Background not stretching the whole page

[iperez_genius]

I have a spinner / loader on my site. At the moment it set to 100% width and 100% height however if I have scrolled to a different part on the page and i click “activate” the spinner background is still only the height and width of the screen and appears at the top of the page.

https://codepen.io/iperez_genius/pen/mxPPwb

I know I have top: 0 in the loaderWrapper class however changing this has done nothing.

[JeroenR]

I would do it like this: https://codepen.io/anon/pen/LdNXqZ/

[iperez_genius]

Unfortunately that didn’t do the trick….

here is a new codepen

https://codepen.io/iperez_genius/pen/dmMrXP

Once you view it, scroll inside the rendering panel and you will see that the grey background stops.

[Shikkediel]

You could wrap it all in another div – and change the top position of .loaderBg if you want the spinner to show center screen at the start.

codepen.io/dmXOzQ

Without that parent, the element will only be relative to the screen.

[JeroenR]

Yeah, taking Shikkediel’s example and changed a little: https://codepen.io/anon/pen/XEKxqz
In this example your loader is fixed in the center.
So it depends on how you want it to behave, loader vs content.

[Author]

Posts