How to add background image in Webflow?

How it works

First, choose the element or section where you want to add the background image
Next double-click on the element you have selected
Then go to "Style" in the right sidebar
Scroll down to the "Backgrounds" section
To add an image click on the "+" icon next to the "Image and Gradient" field in the "Backgrounds" section
Then click on "Choose Image" to select the one that you want to show to your visitors
Select the image directly from the "Assets" panel
Your element now has a background image
And for more edit option go back to "Style" in the right sidebar

Create your own interactive guide with Guideflow

Why should you use this feature?

Webflow is an intuitive platform designed to create stunning websites with powerful visual development tools.

Adding a background image in Webflow enhances the visual appeal of your site, helping to capture users' attention instantly. This feature allows seamless customization, enabling creators to convey the brand's story effectively through aesthetics.

By integrating a background image, you provide your website with personality and depth, contributing to a memorable user experience. This visual element can significantly elevate the quality and engagement level of your content.

Last update

December 19, 2025

Tutorials