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?

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.