How can I achieve full-width images like on Webflow's website?
TL;DR
- Place images in a Section instead of a Container to remove width constraints.
- Set image width to 100%, clear max width, and remove Section side padding.
- Use high-res images and optionally use full-width Divs with background images for more layout control.
To achieve full-width images like on Webflow’s website, you need to remove container constraints and apply the correct width settings.
1. Use a Section Outside of Container
- Drag a Section into your Webflow page.
- Avoid placing the image inside a prebuilt Container element, which limits content to a centered max-width.
- This allows your content to span the entire width of the viewport.
2. Set Image to 100% Width
- Add an Image element inside your Section.
- In the Style panel, set the image’s Width to 100%.
- Also check that Max Width is set to None (clear this if it's set).
3. Remove Default Padding from Section
- Select the Section element.
- In the Style panel, clear out or set Padding (left and right) to 0 so the image touches the edges of the screen.
4. Use High-Resolution Images
- Ensure your image dimensions are at least the full width of a typical screen (e.g., 1920px).
- Webflow will optimize your images but uploading high-resolution versions maintains quality across viewports.
5. Optional: Use Background Images on a Div
- Alternatively, use a Div Block with a Background Image:
- Set the Div’s Width to 100% and Height as desired.
- In the Background section, set:
- Image: Choose your asset
- Size: Cover
- Position: Center
- Repeat: Do not repeat
- This gives flexibility for overlaying other content.
Summary
To create full-width images in Webflow like those on their website, place the image in a Section (not a Container), set its width to 100%, and remove padding constraints. For more design flexibility, you can use background images in Divs set to full-width.