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?

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.