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/placeholders/backgrounds/background-light-tall.jpg'
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-background/background.twig' with {
    opacity: 'heavy',
    fill: 'gradient',
    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>