How can I make a page hero image move on page load? - css

Question

I have a banner image loading on my site with this code:
#keyframes animatedBanner {
from {
background-position-y: bottom;
}
to {
background-position-y: top;
}
}
.page-hero {
background-image: url(https://via.placeholder.com/428x100);
background-repeat: no-repeat;
padding-top: 214px;
padding-bottom: 214px;
text-align: center;
animation: 2s ease-out 0s 1 animatedBanner;
background-size: auto;
}
<div class="page-hero">
<div class="inside-page-hero grid-container grid-parent">
<h2>this is an image</h2>
</div>
</div>
This does what I hoped it would (slide the image up when the page loads). But the problem is that I was hoping to have the image span the entire width of the screen regardless of width. I tried using cover, but then the image doesn't scroll at all.
Is there a way to make this design responsive on the image?

Answer 1

background are a bit tricky when it comes to animate the position. You need some specific sizes. I have a detailed answer (Using percentage values with background-position on a linear-gradient) explaining the logic behind the values I am using:
#keyframes animatedBanner {
from {
background-position: 50% 200%;
}
to {
background-position: 50% 50%;
}
}
.page-hero {
background-image: url(https://picsum.photos/id/1068/800/400);
background-repeat: no-repeat;
padding:100px 0;
text-align: center;
animation: 2s ease-out animatedBanner both .5s;
background-size: auto 200%;
}
<div class="page-hero">
<div class="inside-page-hero grid-container grid-parent">
<h2>this is an image</h2>
</div>
</div>
To get the opposite direction
#keyframes animatedBanner {
from {
background-position: 50% -100%;
}
to {
background-position: 50% 50%;
}
}
.page-hero {
background-image: url(https://picsum.photos/id/1068/800/400);
background-repeat: no-repeat;
padding:100px 0;
text-align: center;
animation: 2s ease-out animatedBanner both .5s;
background-size: auto 200%;
}
<div class="page-hero">
<div class="inside-page-hero grid-container grid-parent">
<h2>this is an image</h2>
</div>
</div>
And if you want to avoid the complexity of background-position and background-size, use pseudo-element
#keyframes animatedBanner {
from {
transform: translateY(100%); /* or -100% */
}
}
.page-hero {
padding: 100px 0;
text-align: center;
position: relative;
z-index: 0;
overflow: hidden;
}
.page-hero:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background: url(https://picsum.photos/id/1068/800/400) center/cover;
animation: 2s ease-out animatedBanner both .5s;
}
<div class="page-hero">
<div class="inside-page-hero grid-container grid-parent">
<h2>this is an image</h2>
</div>
</div>