Bolt Design System

Background Image and Color Themes

Background images can be added to any layout and color themes can be enabled by theme classes.

Important Notes:

The background image can be either the Background component or an absolute positioned image.

Demo

This layout has a background image and theme is set to dark.

Twig

// Set a background
{% set background %}
  {% set image %}
    {% include '@bolt-elements-image/image.twig' with {
      background: true,
      attributes: {
        src: '/images/content/backgrounds/background-tall-4.jpg'
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-background/background.twig' with {
    opacity: 'heavy',
    fill: 'gradient',
    focalPoint: {
      vertical: 'center',
      horizontal: 'center'
    },
    items: [
      image
    ]
  } only %}
{% endset %}

// Pass the background to the background prop
{% include '@bolt-layouts-layout/layout.twig' with {
  background: background,
  attributes: {
    class: 't-bolt-dark',
  },
  ...
} only %}

HTML

<bolt-layout class="t-bolt-dark">
  <!-- Background image goes here before layout items -->
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
</bolt-layout>