I have made it so the background image slowly scales in and out, but it is also scaling the child elements which I don’t want it to do. How do I make so only the background image scales?
Here is my public share link: https://preview.webflow.com/preview/web-dfd8f4?utm_source=web-dfd8f4&preview=b6615bd889d115d56d24da43454d6dd6
(how to access public share link)
Also, a vertical and horizontal scrolls bars seems to have appeared when I view it in my Safari browser 
Put the background image you want to scale alongside the text. Do not put text inside the background image div. Give the background div position: absolute so that it is not interfering with the text
Give background image’s parent overflow: hidden to prevent scrollbars form appearing
Thank you.
That will work great if the image is at the top of the page. But what about when what to do the same thing when I have various images at various places down the page?
I just added to the design so you can see what I mean. I set the second image’s position from the top as a percentage. it all aligns perfectly in Webflow, but when I readjust the browser size, it all messes up.
No that for absolute positioning to work the parent of an absolutely positioned element must have any position but static.
I don’t know what you mean. Also, the scroll bars seem to come and go whenever I reload the page… Is it something to do with the scaling animation I have?
The learning curve is so big…
I honestly feel like giving up.
I advise you to take an advantage of the excellent tutorials webflow team had created. At the very least take the crash course. I suggest going over everything here. This will make you better understand html/css as a whole and the learning curve will stop being a problem after you understand the basics.