Streaming live at 10am (PST)

How do I scale a background image without effecting the child elements?

#1

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)

#2

Also, a vertical and horizontal scrolls bars seems to have appeared when I view it in my Safari browser :confused:

#3
  1. 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

  2. Give background image’s parent overflow: hidden to prevent scrollbars form appearing

#4

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?

#5

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.

#6

No that for absolute positioning to work the parent of an absolutely positioned element must have any position but static.

#7

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?

#8

The learning curve is so big…
I honestly feel like giving up.

#9

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.

1 Like