Öncelikle HTML tarafında şu şekilde bir div oluşturmanız gerek
<div class="homepage__animated-scene">
<picture>
<source media="(min-width: 540px)" srcset="https://static.cdn.printful.com/static/v864/images/homepage/hero-image.webp">
<img src="https://static.cdn.printful.com/static/v864/images/homepage/hero-image-mobile.webp" class="pf-w-100" style="min-height: 2200px;" alt="custom products">
</picture>
</div>Css Kodlarınızın arasına da aşağıdaki kodları eklemeniz yeterli olacaktır.
.homepage__animated-col { overflow: hidden; height: 350px; } @media (min-width:540px){ .homepage__animated-col { height: 570px; } } .homepage__animated-scene { animation: infiniteScrollBg 60s infinite linear; } .homepage__animated-scene:after { content: ""; height: 500%; width: 100%; position: absolute; left: 0; top: 0; background-image: url('https://static.cdn.printful.com/static/v864/images/homepage/hero-image.webp'); background-size: 100% 20%; } @keyframes infiniteScrollBg { 0% { transform: translateY(-100%); } 100% { transform: translateY(-200%); } }Bu divin dışındaki div de overflow:hidden durumunun geçerli olmasına dikkat etmelisiniz.
Hocam selamlar kodu ekledim fakat animasyon işi olmuyor aşağıya doğru kaymıyor görsel.