This layout is in a testing phase, do not use any code examples from the docs for production sites.
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.
// Set a background {% set background %} {% include '@bolt-components-background/background.twig' with { opacity: 'heavy', fill: 'gradient', focalPoint: { vertical: 'center', horizontal: 'center' }, contentItems: [ { pattern: 'image', src: '/images/content/backgrounds/background-tall-4.jpg' } ] } only %} {% endset %} // Pass the background to the background prop {% include '@bolt-layouts-layout/layout.twig' with { background: background, attributes: { class: 't-bolt-dark', }, ... } only %}
<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>