Webflow sync, pageviews & more.
NEW

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 to 100% width and 100vh height, and apply the SVG as a background with size set to "Contain" to avoid cropping.
  • Alternatively, use an inline SVG inside an absolutely positioned div set to full width and height for complete control over scaling.

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.
Rate this answer

Other Webflow Questions