Can I set a property for a component's section background image in Webflow? I have a header that I use on all my pages, but I want to change the background picture to match each page. Thank you.

You can customize a section background image in Webflow components by using either Component Properties or Combo Classes, depending on the level of flexibility you need.

​

1. Use Component Properties for Background Images

• Convert your header into a Component, if it isn’t already.
• Select the section within the component where you want to change the background image.
• In the right-hand panel, click the gear icon (Element Settings) and choose Add Property.
• Choose Image as the property type, and name it (e.g., “Background Image”).
• When you use this component on a page, you’ll see that image property available to override.
• Upload or select a unique image per page directly in the instance properties panel.

​

2. Use Combo Classes as an Alternative

• Assign a base class to the section inside your header component (e.g., header-section).
• On each page, apply a combo class to that section (e.g., header-section contact, header-section about).
• Use the Style panel to set a unique background image for each combo class.
• This method doesn’t require Custom Properties but gives visual flexibility via the Designer.

​

3. Avoid Duplicating Components

• Don’t create multiple copies of the same component just to change the background—it makes maintenance harder.
• Component properties or combo classes let you reuse a single component efficiently.

​

Summary

To change a background image per page in a reusable Webflow header component, use a Component Image Property to set unique images in each instance, or apply uniquely styled combo classes to the background section. Both approaches keep your design clean and scalable.