Skip to main content
Design System 2
University Relations
Contribute

Apply a Background Image to a Backpage Header

You can apply a background image to a Backpage Header component, just like you can apply a background image to other components, for example by uploading an image and applying the label {page-slug}-backpage-header-1-background (you can also use the label {page-slug}-header-background).

Additionally, you can apply a background image to all backpage headers on your site at once, or to all backpage headers in a subsection of your site at once.

  1. To apply a background image to all pages on your site, upload your background image, and apply the label backpage-header-background. Note that images labeled with {page-slug}-header-background or {page-slug}-section-header-background (see below) will override sitewide header background images.
  2. To apply a background image to a section of your site, upload your background image, and apply a label that corresponds to the section’s landing page e.g. {page-slug}-section-header-background.