Easy Tech TutsHow to Add Background Image in Webflow Easily 2026
By Impran M N
Background images are a quick way to add visual impact to a hero section or full-width block, but getting the sizing and alignment right takes a bit of know-how. This guide covers adding an image through Webflow's Backgrounds control, choosing between Cover and Contain, and layering overlays for readability. It's for designers building sections that need a strong visual backdrop.
01Select the target container
Click the section or div block where you want the background image to appear.
02Open the Backgrounds panel
In the right sidebar Style manager, expand the Backgrounds section and click the plus icon to add an image or gradient.
03Upload or choose an image
Click Select Image to open the asset library, then upload a new high-resolution image or pick an existing one from your project.
04Apply sizing and alignment
Choose Cover to fill the container completely or Contain to keep the whole image visible, then set alignment coordinates to anchor the focal point.
05Add an overlay if needed
Turn off image repeating with the tile switch, then layer a color overlay or gradient over the image to keep any text on top readable.
Frequently asked questions
What's the difference between Cover and Contain?
Cover scales the image to completely fill the container, sometimes cropping edges, while Contain keeps the full image visible but may leave empty space.
Why does my background image look stretched?
This typically happens when the sizing is set incorrectly, so switch to Cover or Contain instead of a fixed stretch setting.
How do I keep text readable over a busy image?
Add a semi-transparent color overlay or gradient on top of the image so any text sitting above it has enough contrast.
Will a large background image slow down my page?
Yes, so it's worth compressing images before uploading and relying on Webflow's automatic optimization where possible.
Watch the full walkthrough
The same steps, demonstrated on screen from start to finish.
