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>