cssbackground-repeat

Repeat-y is not working for me. The image is not repeating as it should

I have a simple html code below

<body>
    <div class="wrapper">
        <div class="container">
            <div class="sky"></div>
            <img src="images/arcade-game.png" alt="">
        </div>
        
    </div>
</body>

and here is my CSS code

.container{
    height:90vh;
    width:90vw;
    background-color: white;
    margin: auto auto;
    position: relative;
    overflow:hidden;
    
}

.sky{
    height: 100%;
    width: 100%;
    background-image: url(/images/sky.jpg);
    background-size: cover;
    background-repeat: repeat-y;
    animation: movingsky 4s linear infinite;

}

I have the animation for the .sky to move downwards, however the background isn't repeating as how I wanted it to be.

Am i missing anything here?

Solution

  • background-size: cover; will stretch the image to fill the entire container, therefore no repetitions are visible. Either remove background-size or set it to a fixed size.