Hello all,
Any thoughts on how I could make something like this (with an image overlapping a div box) happen in Webflow?
Thanks in advance,
~ G
Here is my site Read-Only: LINK
Hi @gkt,
you can overlap elements using absolute and relative positioning.
A parent element with positioning relative helps it’s children to use positioning absolute to position them relative to their parent. I can recommend this webflow article about positioning modes to start off.
The document structure for this effect would be:
Parent Div (relative)
- Div for text and button (static/relative)
- image (absolute)
For further questions, add a comment below.
Cheers
Leon
2 Likes
Hey Gareth,
If I were to replicate the screenshot you shared, here’s what I would do: insert a section and container, then put in a white Div block (inside that goes the Heading, paragraph, logos etc). Next, I would select the container and set its positioning to relative. This will allow you to place the image (div) relative to the container. Add a div block inside of the container and set its position to absolute, click the first square that has the little square in the top left, then edit position top by clicking and dragging the 0% till the Div moves into your desired position.
Lastly, set background on that div to the desired image and you should be good to go!
Hope that helps
Ps I see Leon was spot on with his explanation. I think these step by step instructions will be of use too.
1 Like
Fantastic, thank you both.
I made some tweaks and got it working exactly how I want (including at breakpoints for tablet, mobile, etc.). However, I copied the set-up and pasted below in an attempt to do another of the same (except a mirror image… photo on the right, text on the left) and it doesn’t seem to work. I seem to be struggling with the margin of the white div.
Thanks ~ G
Hey Gareth,
Glad you got it working! As for the mirrored-section, pass along a read-only link so Forum members can take a look. Here’s how to add a read-only link:
Thanks Tyler. Thought I put it in the original post, not sure if it’s showing.
Here it is: Webflow - PB12
1 Like
Hey Gareth,
Try and change the width of your “text indent left” div to Auto instead of 100%. Then make it Float Right and change the Margin from -290 to 290.
2 Likes
Worked perfectly, thanks @SoCal-Marcel. I realised I needed to go back and make these changes for the first section too, as it wasn’t quite working as expected.
Any thoughts on how I could limit the max width of the text blocks? I’ve tried a few things and it seems to just break what’s currently working. On a wider screen, the text currently stretches too far…
Thanks again everyone for all your help ~ G
1 Like
Apart from messing around with padding or perhaps limiting the character count using ch as a width on your text block, you can try and make the Image Indent Container smaller - right now it’s set to Max Width 100% try something smaller like 1500px (it will match your other containers). You will lose the styling effect of the white banner and image bleeding off the edge of the page though.
1 Like