How can I create a parent div with 100% width and manually change the height at a specific breakpoint in Webflow, and have an image that covers the parent div as well as a gradient div on top, without using background images? And can you please provide guidance on how to learn these basic concepts in Webflow?
- Create a parent div with 100% width, set manual heights per breakpoint, and apply relative positioning.
- Add an image with absolute full position and object-fit: cover, then layer a second absolutely positioned div with a gradient overlay and higher z-index.
To manually control a parent div's size and have an image + gradient overlay inside it in Webflow without using background images, follow these steps:
1. Create the Parent Div with Relative Positioning
- Add a Div Block to your page and name it something like "Hero Wrapper".
- Set Width to 100% so it spans the full width of the viewport.
- Set Height manually (e.g., 500px).
- Change Height at specific breakpoints by:
- Selecting the desired breakpoint (top of Designer: Tablet, Mobile Landscape, etc.)
- Manually setting a new Height (e.g., 300px).
- Set Position to Relative, so absolute children can anchor inside it.
2. Add the Image as a Child Element
- Inside your parent div, add an Image element and choose the desired image.
- Give the Image absolute positioning (Full)
- Actual settings: Position > Absolute > Full.
- This makes it cover the entire parent div.
- Style settings:
- Width: 100%
- Height: 100%
- Object Fit: Cover — this ensures it fills the container proportionally without distortion.
3. Add the Gradient Overlay Div
- Add another Div Block inside the parent div, after the image.
- Set Position to Absolute (Full) so it sits on top.
- Set Background to a gradient using Webflow’s background settings.
- Optionally adjust opacity or blending to let the image show underneath.
4. Layer Order for Proper Stacking
- Make sure the image div comes before the gradient div in the Navigator panel.
- Optionally assign z-index values to ensure stacking correctness:
- Image: z-index of 1
- Gradient Overlay: z-index of 2
5. How to Learn These Concepts in Webflow
To build a solid foundation in layout, positioning, and visual styling in Webflow:
Webflow University:
Select courses like Webflow 101 Crash Course, Box Model, and Layout Principles.
Key Topics to Focus On First:
Box Model: Understand how padding, margin, width, and height work.
Positioning: Learn the difference between static, relative, absolute, and fixed.
Flexbox and Grid: For layout options.
Breakpoints: Learn how to responsively adjust styles.
Z-Index and Stacking Context: Master which elements appear on top.
Summary
Set the parent div to 100% width with manual heights for each breakpoint, position its children absolutely with Image using object-fit: cover, and add a top-layer gradient div. Use Webflow University to strengthen your grasp of layout and positioning fundamentals.