How do I make a custom multilayered background repeat past initial viewport in scss?

user_11928495 0
Viewed 25

Yes, I already looked at all the suggested answers. No, none of them work

So I've created an animated background of stars that I want to make repeat for as far down as you scroll on my website. However, when you scroll past the initial viewport, the background cuts off.enter image description here

The following is my (relevant) SCSS code. Does anyone know what I would need to change?

.stars-container {
    background: black repeat;
    background-attachment: fixed;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -10;
    width: 100%;
    height: 100%;
    overflow:hidden;

    @mixin stars-child($time, $opacity) {
        display: inline-block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        animation: slide $time linear infinite;
        opacity: $opacity;
        background-repeat: repeat;
    }
    .stars1 {
        @include stars-child(10s, 100%);
        background: url(/images/stars/1.png) repeat center; 
    }
    .stars2 {
        @include stars-child(20s, 95%);
        background: url(/images/stars/2.png) repeat center; 
    }
    .stars3 {
        @include stars-child(30s, 90%);
        background: url(/images/stars/3.png) repeat center; 
    }
    .stars4 {
        @include stars-child(40s, 85%);
        background: url(/images/stars/4.png) repeat center; 
    }
    .stars5 {
        @include stars-child(50s, 80%);
        background: url(/images/stars/5.png) repeat center; 
    }
    .stars6 {
        @include stars-child(60s, 75%);
        background: url(/images/stars/6.png) repeat center; 
    }

    @keyframes slide {
        from {background-position: 0px;}
        to {background-position: 900px;}
    }
}

And this is the very minimal bit of HTML that I used to implement this background

    <div class="stars-container">
        <div class="stars1"></div>
        <div class="stars2"></div>
        <div class="stars3"></div>
        <div class="stars4"></div>
        <div class="stars5"></div>
        <div class="stars6"></div>
    </div>
sass jquery-animate scroll html
1 Answers

Instead of adding an image behind each item, why not just put an image in the background of the container?

* {
    box-sizing: border-box;
}

.stars-container {
    display: flex;
    flex-wrap: wrap;
    -webkit-animation: bg-stars 60s linear 0s Infinite alternate both;
    animation: bg-stars 60s linear 0s Infinite alternate both;
    background-image: url(https://images.unsplash.com/photo-1520034475321-cbe63696469a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
    background-size: 200%;
    background-attachment: fixed;
    background-color: gold;
}
.stars-container > div {
    flex: 1 1 33.33333%;
    color: white;
    padding-block: 3em;
    text-align: center;
    font-size: 2em;
    font-weight: 700;
}

@-webkit-keyframes bg-stars {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes bg-stars {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 200% 0;
    }
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
        <div class="stars-container">
            <div>A</div>
            <div>B</div>
            <div>C</div>
            <div>D</div>
            <div>E</div>
            <div>F</div>
            <div>A</div>
            <div>B</div>
            <div>C</div>
            <div>D</div>
            <div>E</div>
            <div>F</div>
            <div>A</div>
            <div>B</div>
            <div>C</div>
            <div>D</div>
            <div>E</div>
            <div>F</div>
            <div>A</div>
            <div>B</div>
            <div>C</div>
            <div>D</div>
            <div>E</div>
            <div>F</div>
        </div>
    </body>
</html>

user_163703750
Related