background
prop will transform the image into a background image.
alt
attribute blank for such case.srcset
and sizes
attributes for better performance.<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>
<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>