CSS wrapper full height of content and NOT full height of window-CodePudding

I am running a css background with images to animate some twinkling stars. The problem is, the css uses absolute positioning to fill the page with these stars which only fills the size of the current browser window.

position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
display:block;

I need to have it adjust to fill the entire page - when content exceeds the initial window size. Is there a way to make sure this background always covers the entire page and not just the initial browser window size?

Codepen here...

https://codepen.io/lowercase01/pen/PoKdYKa

CodePudding user response：

Just use position: fixed instead of absolute, like this:

.stars, .twinkling {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
}