Can I use a CMS image as a background image for a div or section in Webflow?
TL;DR
- Connect a CMS Collection to the page and place a Div or Section inside the Collection List Item.
- Select the Div, add a custom "style" attribute in the Settings panel, and dynamically bind the CMS image using
background-image: url("{{Image}}");.
Yes, you can use a CMS image as a background image for a Div or Section in Webflow, but it requires using a background image via a dynamic inline style. Here’s how to do it correctly.
1. Connect a CMS Collection to Your Page
- Add a Collection List to the page or template that is connected to your CMS.
- Ensure your element (Div Block or Section) is inside the Collection List Item so it can access the CMS fields.
2. Add a Div or Section for the Background
- Drag a Div Block (or select an existing Section/Div) inside the Collection List Item.
- Give it a class name for styling and identification.
3. Use a Dynamic Background Image via Inline Style
- While the image field from the CMS can't be applied directly as a background image using Webflow’s visual background image settings, you can add it dynamically using an inline style attribute.
- Select the Div, go to the Settings panel (gear icon), and under the Custom Attributes section:
- Add a custom attribute:
- Name:
style - Value:
background-image: url("YOUR_IMAGE_FIELD");
- Name:
- Instead of "YOUR_IMAGE_FIELD", click the purple + Add Field button and choose your CMS image field. Webflow will insert a dynamic binding, like:
background-image: url("{{Image}}");
4. Apply Additional Styling
- Control size, positioning, and overlay effects using the Div’s class name styles (e.g., set background-size: cover, background-position: center, etc.) through the Style panel.
5. Preview and Test
- Preview the page to confirm that each item in the collection list is correctly pulling in its own CMS image as a background.
Summary
To use a CMS image as a background image in Webflow, wrap it in a Collection List, place your target Div inside that list, and use an inline style attribute with dynamic CMS image binding. This is the only way to apply CMS images as background images directly in Webflow.