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 https://mysite.wvu.edu/my-section/my-page
,
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
.