Is it possible to create a Webflow section background that is 100% width and height without cropping, allowing a vector image to stretch with the section?
TL;DR
- Set the section's width to
100vwand height to100vhin Webflow. - Add the vector image as a background, set size to
100% 100%, position toCenter Center, and disable repeat. - Avoid using "Cover" or "Contain" to prevent cropping; use Flexbox or Grid if needed.
- Alternatively, use an inline SVG or image element with width and height at
100%andobject-fit: fill.
Yes, you can make a Webflow section background scale to 100% width and height without cropping while ensuring a vector image stretches with the section.
1. Set the Section to 100% Width and Height
- Select the section in Webflow.
- Under the Style panel, set:
- Width:
100vw(viewport width). - Height:
100vh(viewport height).
2. Add the Vector Image as a Background
- In the Style panel, go to Background settings.
- Click Image & Gradient, then upload your vector file.
- Set the Size to
100% 100%(this forces the image to stretch instead of crop). - Set the Position to
Center Centerto keep it aligned.
3. Ensure No Background Cropping
- Ensure Repeat is set to
No Repeatto prevent tiling. - Do not use "Cover" or "Contain" as these may introduce cropping or spaces.
- Use Flexbox or Grid if you need additional content inside the section without affecting the background scaling.
4. Alternative: Use an Inline SVG or Image Element
If the background settings don’t work, you can:
- Add an Image element inside the section instead.
- Upload your SVG and set:
- Width:
100%. - Height:
100%. - Object-fit:
fill(if necessary).
Summary
To achieve a non-cropping, fully stretching background, use a background image with "100% 100%" sizing or an inline image with width and height set to 100%.