<div class="scroll-bg"></div>
@keyframes scrollBg {
from {
transform: translateY(0px);
}
to {
transform: translateY(-330px);
}
}
.scroll-bg {
height: 100%;
width: 100%;
position: fixed;
padding-bottom: 330px;
background-color: #E8BA9B;
background-image: url('https://andreivictor.ro/codepen/scroll-bg-animation-pinterest/bg_pasta_grid-3f880df3.jpg');
background-size: cover;
animation: scrollBg 35s linear forwards;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.