Webflow answer

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

  • Upload your vector image and insert a section with 100% width and height settings.  
  • Apply the image as a background using cover or contain settings, set its position to center, and enable responsive settings.

Creating a section background in Webflow that is 100% width and height without cropping, allowing a vector image to scale with the section, is definitely possible. Here's how you can achieve that.

1. Upload the Vector Image

  • Go to the Assets Panel in Webflow Designer.
  • Upload your vector image (preferably SVG for scalable quality).

2. Set Up the Section

  • Insert a Section into your Webflow project where you want the background.
  • Set the Section's Width to 100% for full-width coverage.
  • Set the Section's Height to 100vh for full viewport height or adjust as needed for your design.

3. Apply the Background Image

  • Select the Section you added.
  • Go to the Style Tab in the Designer panel.
  • Under Backgrounds, upload the vector image you placed in the Assets Panel.
  • Set the Background Size to cover or contain. 
  • Cover will ensure the image covers the entire section but may crop images if not perfectly proportionate.
  • Contain will keep the image dimensions intact and avoid cropping, though it may leave some whitespace.

4. Adjust Image Settings

  • Set the Position to center to keep the image centered in the section.
  • Try Adjusting Background Repeat settings if your image does not fill the space as desired.

5. Responsive Design

  • Enable Responsive Settings to adjust the image display across different device sizes.
  • Test your design on various device views to ensure compatibility and adjust as needed.

Summary

To create a section background in Webflow that is 100% width and height without cropping, upload your vector image, apply it as a background using cover or contain settings, ensure it’s centered, and check responsiveness. This ensures your vector image scales with the section while maintaining its proportions.

Other Webflow questions