Can I use a CMS image as a background image for a div or section in Webflow?

Yes, you can use a CMS image as a background image in Webflow, but it must be done using inline style settings via a Collection List or within a Collection Page.

1. Use CMS Background Image Inside a Collection Page or Collection List

• Webflow allows dynamic styling using CMS fields only inside a Collection Page or inside a Collection List.
• Background images can't be set dynamically in the Style panel, but they can be applied via the Element Settings panel when using a Collection context.

2. Add a Background Image Using a Collection List

• Drag in a Collection List element to your page.
• Bind it to your CMS Collection.
• Inside the Collection List, add a Div Block that you want to have the background image.
• With the Div Block selected, go to the Element Settings panel (gear icon), and under Backgrounds, click the blue “+ Add Field” icon.
• Choose your Image field from the Collection.
• Webflow will now pull each item's image field into the background style of each Div Block.

3. Add a Background Image on a Collection Page

• When you're editing a Collection Page, all elements have access to that item's CMS fields.
• Select the Div or Section, go to the Element Settings panel, and click Add Field under the Background settings.
• Choose the Image field you want to use.
• This method sets the background image dynamically for each CMS item.

4. Adjust Background Styling

• Once the image is set, use the Style panel to customize how the background appears (e.g., cover, contain, position, repeat).
• You can still define fallback backgrounds or overlays using classes.

Summary

To use a CMS image as a background, you must place the target Div or Section inside a Collection List or on a Collection Page, then bind the Image field via the Element Settings panel. You cannot set a dynamic background image purely through the Style panel.