How can I create an overlapping layout in Webflow using a separate div block for the gray box and ensuring the image stretches to the edge of the screen?
TL;DR
- Add an image with a width of 100vw.
- Add and position a Div Block for the gray box, set background color to gray and position to absolute.
- Ensure the gray box has a higher z-index than the image.
- Adjust padding, margins, and preview to perfect the layout.
To create an overlapping layout in Webflow where an image stretches to the edge of the screen and has a separate gray box overlayed, follow these steps.
1. Set Up Your Image
- Add an Image element to your canvas.
- Set the Width of the image to 100vw to ensure it stretches across the full width of the screen.
2. Add a Div Block for the Gray Box
- Add a Div Block to your page that will act as the gray box.
- Position this Div Block relative to the image by using Webflow’s positioning tools.
3. Style the Gray Box
- Set the Background Color of the Div Block to your desired shade of gray.
- Adjust the Position settings of the Div Block to absolute. This allows you to place it precisely over the image.
4. Adjust the Z-Index
- Ensure the Gray Box has a higher z-index than the image so it appears on top.
- Set this value in the Styles panel for the Div Block.
5. Fine-Tune the Layout
- Adjust Padding and Margins to align the gray box as needed.
- Preview Your Changes to ensure that the layout looks as expected across different screen sizes.
Summary
To overlay a gray box on a full-width image in Webflow, use a separate absolute-positioned div block with a higher z-index over a 100vw-stretched image and style it accordingly. Adjust positions and sizes to achieve the desired overlap.