Yeah, I know this is basic, but EVERY #$%^@#$ TIME I try to do this, I can’t figure it out.
parent div - 100% width within the container it is in, manually change height to breakpoint
\ image - covers the size of the parent div
\ div - nice gradient that also covers the size of the parent div (and is on top of the image)
This sounds amazingly logical and simple, but I just don’t get it. Is the only way to do this to use background images? I thought if the parent dive had overflow hidden, the image would then scale within? OR, ignore that I have no clue what I’m talking about.
In addition to the answer, to whomever answers it, how did you learn how to do this? Because, the Webflow tutorials are severely lacking in real day-to-day basics. It shouldn’t take me 45 minutes of staring at code I’m not supposed to have to know on Stackoverflow while wanting to ram my fist through a window because I still have no idea.
You can do this by two ways - by position absolute (this is most likely the solution you are looking for) or by using grid and filling the same area with both elements.
How to do the position absolute method:
Make sure that your parent element has set height and width (it shouldn’t be auto).
Set the positon atribute of the parent element to relative. The site shouldn’t change in any way after you do this. (If you don’t set the parent to relative, your elements will get aligned to the Body instead after you finish all the steps.)
Set the position of the two child elements to absolute. Right now the elements should be overlapping and aligned to the upper left corner of the parent element. If you want to change their position, use the tiny images below the Position: Absolute - they will set the percentages for you automatically, or just overwrite the values yourself until you are happy with the placement.
Hmmm… I guess this is where I always get stuck. I want the parent element to be auto, so it still automatically scales with the responsive width of the browser/device. Is that then not even possible?
I did NOT know, that you can manually stack elements in the grid… wow, interesting. I will experiment with that. It seems absurd to have a grid of 1 row/1 column, of course. But, it’s a direction I didn’t think of for this, and I’m sure will use in the future. Thanks for mentioning that.
I think if you mean overlapping two elements to give you a 3d effect on hover etc… like a box overlapping another box but not directly. If this is the layout you are trying to achieve you might need to add an additional wrapper to the overlapping elements to control the order as opposed to just having both overlap and then giving one of them an alternative position with absolute.
