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's background image for a reusable component (like a header) in Webflow by using component properties to control style changes like background images uniquely per page.

1. Convert the Header to a Component

• If your header isn’t already a component, select the header section, then click Create Component in the right-click context menu or from the top toolbar.
• Name the component clearly, like “Global Header”.

2. Use a Section Inside the Component

• Ensure the section (or div block) that needs a unique background image exists within the component.
• Select the section and check the Style panel to confirm the background image is applied via styles.

3. Add a Style Property to Control the Background Image

• In the Component panel (right-side, when editing the component), click + Add Property.
• Select Style, then choose the section/div where the background image is applied.
• Inside the Style property dialog:
• Choose Background Image.
• Click Add Property to save.

Now, this background image becomes customizable wherever you use the component.

4. Customize the Background Image on Each Page

• Go to a page where the header component is used.
• Select the component instance (not the main one).
• In the right-side panel under Component Properties, you’ll now see the Background Image property.
• Upload or set a different image for that specific page.

This change only affects that instance and does not override the master component, making it perfect for per-page customization.

Summary

You can set a custom background image per page by adding a Style property (Background Image) to a reusable component's section. This lets you keep a shared header layout across pages while using different visuals.