How can I stretch a body background image in Webflow to fill the entire screen without preserving its aspect ratio?

To stretch a background image to fill the entire screen in Webflow without preserving its aspect ratio, you need to adjust the background image settings on the appropriate element (like the body or a section).

1. Select the Right Element

• Click on the Body element in the navigator or canvas.
• If you're applying the background to a specific section instead, select that section.

2. Add Background Image

• Go to the Style panel (right sidebar).
• Scroll to the Backgrounds section.
• Click the image icon and upload or select your background image.

3. Set Background Settings to Stretch

• Under the same Backgrounds section, adjust the settings as follows:
• Size: Select Cover (forces the image to stretch and fill the container).
• Position: Set to Center Center (or adjust as needed).
• Repeat: Set to No Repeat.

4. Force Aspect Ratio Loss (Stretching)

To ignore the image’s natural aspect ratio, use the following steps:

• Set Size to Custom (not Cover or Contain).
• In the Width and Height fields:
• Set Width to 100%
• Set Height to 100%

This forces the image to stretch both vertically and horizontally, distorting it if needed to fill the screen or element bounds.

Important: This method removes aspect ratio preservation. If you want this effect on all screen sizes, ensure the parent container (e.g., body or section) is set to at least 100vw width and 100vh height.

5. Ensure Full-Screen Coverage

• For body or a full-screen section:
• Set Height to 100vh in the Style panel.
• For the body, you might need to set min-height: 100vh using custom code or through the Style panel if using a parent wrapper element.

Summary

To stretch a Webflow background image across the screen without keeping its aspect ratio, set the background Size to "Custom", then set both Width and Height to 100%. Also ensure the containing element has 100vw width and 100vh height to cover the full screen.