CODEWITHSUNDEEP
cssscrollbackgroundinfinite
Cody Crisis
Cody Crisis

Reputation: 13

Creating an Infinite Scrolling VERTICAL background

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>

Upvotes: 1

Views: 6343

Answers (2)

shuvo
shuvo

Reputation: 11

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>

Upvotes: 1

Zach Jensz
Zach Jensz

Reputation: 4078

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>

Upvotes: 3

Related Questions