Yes, it's possible to create a 100% width and height section in Webflow where a vector image (like SVG) stretches without cropping. Ensure both the section and background image are set up correctly to maintain proportions and visibility.
1. Set Section to Full Width & Height
- Select your section in the Webflow Designer.
- In the Style panel, set:
- Width: 100%
- Height: 100vh (this makes it full height of the viewport)
- Set Position: relative if needed for stacking content.
2. Use an SVG as the Background Image
- Go to the Section's Style panel, scroll to the “Backgrounds” section.
- Click the + Add Image button and upload your vector (SVG) file.
- Set:
- Position: Center Center
- Size: Cover or Contain, depending on whether you want it to stretch (cover) or fit entirely (contain).
- Use Contain if you don’t want any part of the SVG cropped.
- Use Cover if you want the SVG to fill space completely but allow some cropping.
- Repeat: No-repeat
3. Alternative (Using Inline SVG)
- Instead of a background image, you can:
- Place an Image element inside the section.
- Use an SVG file and set its Width: 100% and Height: 100%.
- For best results, place it in a div block with Position: absolute, top: 0, left: 0, width: 100%, height: 100%, and set section to overflow: hidden.
- This method gives more control and full scaling without cropping.
Summary
To make an SVG stretch across a full-width and full-height Webflow section without cropping, either:
- Set the section to 100% width and 100vh height, and
- Use “Background size: Contain” for the SVG
or - Use an inline SVG in an absolutely positioned div to fully control its scaling and prevent cropping.