Simple Background Image
The background
prop will transform the image into a background image.
Important Notes:
The image must be placed into a container that is not positioned static (e.g. absolute, fixed, relative, or sticky).
It must be the first child of said container.
All foreground content of said container must be positioned relative.
Most background images are decorative, it is reasonable to leave the alt
attribute blank for such case.
It is recommended to use the srcset
and sizes
attributes for better performance.
Demo
This is a non-static container
Twig
<div style="position:relative;">
// This image will fill up the non-static parent container
{% include '@bolt-elements-image/image.twig' with {
background: true,
attributes: {
src: 'path/image-1600.jpg',
srcset: 'path/image-400.jpg 400w, path/image-800.jpg 800w, path/image-1600.jpg 1600w',
sizes: '100vw',
width: 1600,
height: 900,
},
} only %}
<div style="position:relative;">
// Content goes here after the image
</div>
</div>
HTML
<div style="position:relative;">
// This image will fill up the non-static parent container
<img src="path/image-1600.jpg" srcset="path/image-400.jpg 400w, path/image-800.jpg 800w, path/image-1600.jpg 1600w" sizes="100vw" width=1600 height=900 class="e-bolt-image e-bolt-image--bg" alt="">
<div style="position:relative;">
// Content goes here after the image
</div>
</div>