Creating an Infinite Scrolling VERTICAL background - css

Question

There are tons of horizontal scrolling backgrounds but that isn't my issue. Any time I create a vertical scroll using keyframes, the background image itself runs out, or it glitches out completely and starts the scroll effect over. That is not what I need. I need a seamless VERTICAL scrolling background that takes up the full width of the screen. There will be a container with the overflow hidden and it's background needs to scroll slowly upwards with a series of images that never glitches out, runs out etc. It needs to look like the one million examples of horizontal scrolling but vertically.
In the CSS is the actual dimensions of the image I am using. I am using a placeholder to start this conversation. Notice, even with the placeholder, the image just eventually stops.
Why does it do this with vertical scrolling, but typically not with horizontal? It doesn't make sense to me and there aren't many resources out there about vertical infinite scrolls of a background image, believe it or not.
If anyone has any recommendations, I will take it. JS or CSS whatever it is I am willing to listen and learn and understand why the f*** I can't figure this out. Thanks.
<div class="container">
<div class="sliding-background"></div>
</div>
.container {
overflow: hidden;
height: 600px;
}
.sliding-background {
background: url("https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/a-dramatic-image-of-a-tall-tree-sitting-against-moody-skies-in-the-background-with-blue-and-yellow-tones-chris-cook.jpg") repeat-y;
height: 4980px;
width: 1440px;
animation: slide 30s linear infinite;
}
#keyframes slide{
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, -100%, 0);
}
}
<div class="container">
<div class="sliding-background"></div>
</div>

Answer 1

If you know the exact height of the image, this solution should work:
body {
margin: 0;
}
.container {
overflow: hidden;
height: 600px;
}
.sliding-background {
--imageHeight: 900px;
background: url("https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/a-dramatic-image-of-a-tall-tree-sitting-against-moody-skies-in-the-background-with-blue-and-yellow-tones-chris-cook.jpg") repeat-y;
height: calc(var(--imageHeight) * 2);
animation: slide 4s linear infinite;
}
#keyframes slide {
from {
transform: translateY(0px);
}
to {
transform: translateY(calc(var(--imageHeight) * -1));
}
}
<div class="container">
<div class="sliding-background"></div>
</div>

Answer 2

If there is any confusion about the image height:
body {
margin: 0;
}
.container {
overflow: hidden;
height: 600px;
}
.sliding-background {
background: url("https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/a-dramatic-image-of-a-tall-tree-sitting-against-moody-skies-in-the-background-with-blue-and-yellow-tones-chris-cook.jpg") repeat-y;
-webkit-animation: bgScroll 600s linear infinite;
animation: bgScroll 600s linear infinite;
height: 100%;
background-size: cover;
position: relative;
}
#keyframes bgScroll{
0% {
background-position: 0 0;
}
100% {
background-position: 0 10000%;
}
}
<div class="container">
<div class="sliding-background"></div>
</div>