There is the following code, it is necessary to make sure that the background is cyclically scrolled vertically without shvof.

.bg { -moz-animation: bg 5s linear infinite; -webkit-animation: bg 5s linear infinite; -ms-animation: bg 5s linear infinite; animation: bg 5s linear infinite; background: url("https://cdn.pixabay.com/photo/2014/04/05/11/39/rain-316580_960_720.jpg") bottom left; background-repeat: repeat-y; height: 100%; left: 0; position: fixed; top: 0; background-size: cover; width: 100%; } @keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(0,1920px,0); -webkit-transform: translate3d(0,1920px,0); -ms-transform: translate3d(0,1920px,0); transform: translate3d(0,1920px,0); } } 
 <div class="bg"></div>

    1 answer 1

    We have to annotate background-position

     body { display: flex; align-items: center; justify-content: center; overflow: hidden; height: 100vh; } #bg { width: 100%; height: 100%; background: url('https://mobilegamegraphics.com/wp-content/uploads/2015/06/Untitled-3.jpg') repeat-y; background-size:100% 50%; animation: changewidth linear 5s infinite; } @keyframes changewidth { from { background-position-y: 0; } to { background-position-y: -100%} } 
     <div id="bg"></div>