Skip to main content

Apply a Background Image to a Component

Most of our shared CleanSlate partials allow you to assign a background image by uploading an image and applying a label that corresponds to your component and the page on which it lives.

To know which label to apply, open the component’s Style Editor. The label will be shown in the panel that appears. These labels follow the naming convention {page-slug}-{component-name}-{instance-number}-background.

The page slug is the last part of your page’s URL. For example, if you URL is, the slug would be my-page.

The component’s instance number is set to 1 by default, then increments for each additional instance of the same component used on your page.

Example: if you want to apply a background image to the first instance of a Hero component on your Home page, the label will be home-hero-1-background.

Applying a Background Image to a Sitewide Component

You can apply a background to a 'sitewide' component by adding a label to your background image with the following naming convention site-{component-name}-{instance-number}-background, for example site-hero-1-background.