behz4d behz4d - 2 months ago 10
CSS Question

CSS background image scroll animation

I have managed to have an imaged scrolled in the bg, but the problem is that for the pages which it's height is more than screen size height, the animation is not shown in the bottom of the page (the overflowed part)

here is the fiddle:
jsfiddle demo

the CSS for the background animation:

#main-banner .bg-animation{
background: url('http://pentathemes.com/saasapp/images/intro-bg.gif') 0 0 repeat;
-webkit-animation: animate_background 10s linear 0s infinite;
-moz-animation: animate_background 10s linear 0s infinite;
-o-animation: animate_background 10s linear 0s infinite;
animation: animate_background 10s linear 0s infinite;
height:100vh;
}
@-webkit-keyframes animate_background {
from {
background-position: 0 0;
}
to {
background-position: 0 -200px;
}
}
@-moz-keyframes animate_background {
from {
background-position: 0 0;
}
to {
background-position: 0 -200px;
}
}
@-o-keyframes animate_background {
from {
background-position: 0 0;
}
to {
background-position: 0 -200px;
}
}
@keyframes animate_background {
from {
background-position: 0 0;
}
to {
background-position: 0 -200px;
}
}


As you can see in the above example, the animation is not applied to the bottom of the page for the last lines.

How this could be fixed? Thanks

Answer

Oh i see the problem now.

Replace height:100vh; with min-height: 100vh; height:100%;

Comments