Hey all. I’m having issues with creating my pages so that the background image in the header does an automatic slow zoom effect upon page load for each of my website’s pages.
More specifically, I’m able to get the background image of my header to do a slow zoom upon page load, but the background image appears to overlap the section immediately beneath it at the beginning of the zoom effect (since it is zooming from 110% to 100%). You will see what I’m talking about on the “About” page of my website (screenshot below showing weird awkward overlap jutting outward from the bottom).
Side note that for some strange reason this doesn’t happen on my homepage where I’ve also setup the effect.
I tried fixing it by making the z-index high enough for the section below the header so that it stays on top of any graphics stemming from the header section. This worked except now the navbar completely disappears behind the first section when scrolling over it. This is weird because the navbar is completely separate both from the header section as well as the section beneath it.
Can anyone help resolve this for me? Please help!
NOTE: I’ve so far only tried implementing this effect on the homepage and “About” pages… Every other page you can ignore for now (because they won’t have a zoom effect and therefore the problem that is detailed here won’t be present).
SCREENSHOTS (please read above for full context):
SCREENSHOT #1: Background Header Image Popping Out Over First Section
SCREENSHOT #2: Navbar Disappearing Beneath First Section
Here is my site Read-Only:
https://preview.webflow.com/preview/rg-johnson-company-inc?utm_medium=preview_link&utm_source=designer&utm_content=rg-johnson-company-inc&preview=6c34483e1dedb54f66248ccbd251fea9&workflow=preview