I’ve found a good animation of flying birds. I got it working on a web page. Now I would like to adjust it’s vertical positioning so that it appears at the same vertical position on all size devices. I’ve tried various css position settings ( absolute, relative, fixed, etc.) but when I get it set right on my laptop, it moves vertically out of position on smaller screens. Any suggestions? Thanks.
Hi,
A position is always given in relation to something, so we need to take the environment into consideration to give any ideas.
With code we could know what to suggest.
Please post the context or code or a link to the page you work on. 
Thanks. Here is the live page: https://www.ballymoretales.com/c1s1page/
and the code:
HTML
leads to an underground lake. It was also known as a land of unfriendly hawks and bears. Although wild and rough, The Hills were very beautiful.</p>
<div class="bird-container bird-container--one">
<div class="bird bird--one"></div>
</div>
<div class="bird-container bird-container--two">
<div class="bird bird--two"></div>
</div>
<div class="bird-container bird-container--three">
<div class="bird bird--three"></div>
</div>
<div class="bird-container bird-container--four">
<div class="bird bird--four"></div>
</div>
<img src="/imgMaster/mountain.jpg" alt="Prologue" class="center2" />
CSS
/* Flying Birds*/
.bird.bird--one{
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg);
background-size: auto 100%;
width: 88px;
height: 125px;
will-change: background-position;
animation-name: fly-cycle;
animation-timing-function: steps(10);
animation-iteration-count: infinite;
animation-duration: 1s;
animation-delay: -0.5s;
}
.bird.bird--two{
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg);
background-size: auto 100%;
width: 88px;
height: 125px;
will-change: background-position;
animation-name: fly-cycle;
animation-timing-function: steps(10);
animation-iteration-count: infinite;
animation-duration: 0.9s;
animation-delay: -0.75s;
}
.bird.bird--three{
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg);
background-size: auto 100%;
width: 88px;
height: 125px;
will-change: background-position;
animation-name: fly-cycle;
animation-timing-function: steps(10);
animation-iteration-count: infinite;
animation-duration: 1.25s;
animation-delay: -0.25s;
}
.bird.bird--four{
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg);
background-size: auto 100%;
width: 88px;
height: 125px;
will-change: background-position;
animation-name: fly-cycle;
animation-timing-function: steps(10);
animation-iteration-count: infinite;
animation-duration: 1.1s;
animation-delay: -0.5s;
}
.bird-container.bird-container--one{
position: absolute;
top: 1955px;
left: -10%;
z-index: 5;
transform: scale(0) translateX(-10vw);
will-change: transform;
animation-name: fly-right-one;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 15s;
animation-delay: 0;
}
.bird-container.bird-container--two{
position: absolute;
top: 1965px;
left: -10%;
z-index: 5;
transform: scale(0) translateX(-10vw);
will-change: transform;
animation-name: fly-right-one;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 16s;
animation-delay: 1;
}
.bird-container.bird-container--three{
position: absolute;
top: 1975px;
left: -10%;
z-index: 5;
transform: scale(0) translateX(-10vw);
will-change: transform;
animation-name: fly-right-one;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 14.6s;
animation-delay: 9.5s;
}
.bird-container.bird-container--four{
position: absolute;
top: 1970px;
left: -10%;
z-index: 1;
transform: scale(0) translateX(-10vw);
will-change: transform;
animation-name: fly-right-one;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 16s;
animation-delay: 10.25s;
}
@keyframes fly-cycle {
100% {
background-position: -900px 0;
}
}
@keyframes fly-right-one {
0% {
transform: scale(0.3) translateX(-10vw);
}
10% {
transform: translateY(2vh) translateX(10vw) scale(0.4);
}
20% {
transform: translateY(0vh) translateX(30vw) scale(0.5);
}
30% {
transform: translateY(4vh) translateX(50vw) scale(0.6);
}
40% {
transform: translateY(2vh) translateX(70vw) scale(0.6);
}
50% {
transform: translateY(0vh) translateX(90vw) scale(0.6);
}
60% {
transform: translateY(0vh) translateX(110vw) scale(0.6);
}
100% {
transform: translateY(0vh) translateX(110vw) scale(0.6);
}
}
@keyframes fly-right-two {
0% {
transform: translateY(-2vh) translateX(-10vw) scale(0.5);
}
10% {
transform: translateY(0vh) translateX(10vw) scale(0.4);
}
20% {
transform: translateY(-4vh) translateX(30vw) scale(0.6);
}
30% {
transform: translateY(1vh) translateX(50vw) scale(0.45);
}
40% {
transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
}
50% {
transform: translateY(0vh) translateX(90vw) scale(0.45);
}
51% {
transform: translateY(0vh) translateX(110vw) scale(0.45);
}
100% {
transform: translateY(0vh) translateX(110vw) scale(0.45);
}
}
I would like the birds to fly through the sky part of the mountain image.
I’ve come up with a solution. I set the bird animation Position to Relative. I set a negative top margin on the mountain image so that it moved up to where the birds are flying. The movement of the birds shifted horizontally to the right for some unknown reason. To compensate I added a 35% offset on the right.
What I did may not be the best method but it seems to work. Please let me know if there’s a better way. Thanks.
Nuts, I spoke a little too soon. If you look at the web page, the birds don’t make it all the way to the right before they stop. It seems I need to stretch their container horizontally somehow.
Hi,
Then you need to relate their position to the mountain image.
I suggest you wrap a div arond the birds and the mountain image:
...Although wild and rough, The Hills were very beautiful.</p>
<div class="mountain-bird-wrapper">
<div class="bird-container bird-container--one">
<div class="bird bird--one"></div>
</div>
<div class="bird-container bird-container--two">
<div class="bird bird--two"></div>
</div>
<div class="bird-container bird-container--three">
<div class="bird bird--three"></div>
</div>
<div class="bird-container bird-container--four">
<div class="bird bird--four"></div>
</div>
<img src="/imgMaster/mountain.jpg" alt="Prologue" class="centerBird" />
</div>
<p>An equal distance to the south, Waterford hamlet rested...
Give the new div a position relative:
.mountain-bird-wrapper{
position: relative;
}
And change the bird containers to position absolute:
.bird-container{
position: absolute;
}
I now see you have put the position on different divs and you need to change or remove their positions at where you’ve put them.
Then the birds will refer their absolute position to the relaive positioned parent.
Try that and come back here. 
3 Likes
Then I saw the huge negative top margin on the mountain image in order to pull it up under the birds.
That top margin need to be removed or the new container will collapse on the image.
If I try what I suggested with the Inspector tool the animation seem to work as intended. They fly all the way through.
Though you need to adjust the birds’ top position to where you want them, they could all have different top positions and no bottom positions.
Edit)
If you want to confine the birds to the mountain image you could give the new div a table display with auto margins and overflow hidden:
.bird-container{
position: relative;
margin: auto;
display: table;
overflow: hidden;
}
To make the birds use the whole image width with this example their right position of 35% need to be removed.
4 Likes
Everything worked. Thanks very much.
1 Like
I just noticed a small issue. I have a box-shadow around the mountain image.
.center2 {
display: block;
margin-left: auto;
margin-right: auto;
width: 45vw;
border: 1px solid #333;
padding-bottom: 0vh;
border-radius: 15px;
box-shadow: 5px 5px 20px 0px #333;
margin-bottom: 1rem;
opacity: .9
}
When the birds are confined to the mountain image, the shadow on the right and left is cut off. Can this be adjusted? Thanks.
Yes, the overflow hidden on the container cuts the image shadow. But where there are margins on the image they are leaving room for the shadow.
You have two options:
– Set margins on all sides of the image to expand room for the shadows to show.
Edit: The margins on the image will also show the birds over the shadows because the hiding is pushed outside the image.
– Or move the border and border-radius and box-shadow to the container, so they wont be hidden. Then set margin: 0; on the image to remove all its margins (margin-top is inherited by the img tag).
Nice!
A sidenote:
The page has a header and a footer but no main container in between, with all main content placed in the header element. I would guess only the chapter image is meant to be in the header section?
The missing content section is just an oversight isn’t it? 
1 Like
Yes, an oversight, lol.
“– Or move the border and border-radius and box-shadow to the container, so they wont be hidden. Then set margin: 0; on the image to remove all its margins (margin-top is inherited by the img tag).”
Which container to move to? Will the class remain the same (center2) or will there be a new class? Thanks.
The “center2” class on the image was, when I checked yesterday, called “centerBird”. 
When I check the page now, you have made two new containers that wraps the birds and the image: The “mountain-birds-wrapper” and an additional “bird-container” doing the same wrapping.
Again you have two options:
– Remove the additional “bird-container” div and let the “mountain-birds-wrapper” have its rules.
– Or remove the “bird-container” class on the four bird containers.
(The rules for that class should not be given to the birds anyway, they have no use for those rules.)
Ok. I removed the “bird-container” wrapper and moved its rules to "mountain-birds-wrapper. Everything still works but the shadow is still cut off on its sides.
Did you also move the image’s borders and radius and shadow to it?
That indicates that the shadow is still on the image and that the image still have top and bottom margins.
No. I still have the two questions about that:
“– Or move the border and border-radius and box-shadow to the container, so they wont be hidden. Then set margin: 0; on the image to remove all its margins (margin-top is inherited by the img tag).”
Which container to move to? Will the class remain the same (center2) or will there be a new class? Thanks.
To the "mountain-birds-wrapper”.
That class is on the image and can be whatever you like, but the border, radius and shadow properties should move to the "mountain-birds-wrapper” container that holds the birds and the image.
Like:
.mountain-bird-wrapper {
position: relative;
margin: auto;
display: table;
overflow: hidden;
border: 1px solid #333;
border-radius: 15px;
box-shadow: 5px 5px 20px 5px #333;
}
bird-container--one {
position: absolute;
top: 0px;
z-index: 5;
transform: scale(0) translateX(-10vw);
will-change: transform;
animation-name: fly-right-one;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-delay: 0s;
}
.center2 {
display: block;
/* margin-left: auto; */
/* margin-right: auto; */
width: 45vw;
/* border: 1px solid #333; */
/* padding-bottom: 0vh; */
/* border-radius: 15px; */
/* box-shadow: 5px 5px 20px 0px #333; */
/* margin-bottom: 1rem; */
opacity: .9;
margin: 0;
}
Thank you, it works. But I’m not sure why. The purpose of the “mountain-bird-wrapper” was to keep the birds within the image. But the shadow details are still in that same wrapper. Why don’t they get clipped also?
The overflow can only affect what’s inside the container’s edges/borders and as the shadows are outside the borders they can’t be hidden.
Before the move, the shadows were affected as they were on a child inside the container.
Glad it works! 
2 Likes
Thanks
1 Like
I just noticed something. On small screens, the birds first appear about 20% into the image as opposed to flying in from off the image on the left.