Use Case: Advanced Background Image In addition to the background prop, there are 2 CSS custom properties available for use to further customize background image(s). They are commonly used when multiple decorative background images are required. Important Notes: --e-bolt-image-fit Setting this to none will allow the background image to stay exactly at its specified width and height. Setting this to contain will allow the background image to be contained within its parent container. No cropping will happen to the image. By default, this is set to cover. More advanced options are supported, reference the CSS property object-fit. --e-bolt-image-position This custom property accepts pair values: x-axis and y-axis position tokens (e.g. top left, top center, top right, bottom left, bottom center, bottom right, left center, right center, center center). By default, this is set to center center. More advanced options are supported, reference the CSS property object-position. Demo Setting fit to contain
Setting fit to none and position to exact directions
Twig
<div style="position:relative;">
  // This background image will not be cropped and it is positioned to center of the non-static parent container.
  {% include '@bolt-elements-image/image.twig' with {
    background: true,
    attributes: {
      src: 'path/image.jpg',
      width: 500,
      height: 500,
      style: '--e-bolt-image-fit: contain; --e-bolt-image-position: center center;',
    },
  } only %}

  // This background image will not stretch and it is positioned to top left of the non-static parent container.
  {% include '@bolt-elements-image/image.twig' with {
    background: true,
    attributes: {
      src: 'path/image.jpg',
      width: 150,
      height: 150,
      style: '--e-bolt-image-fit: none; --e-bolt-image-position: top left;',
    },
  } only %}
</div>
HTML
<div style="position:relative;">
  // This background image will not be cropped and it is positioned to center of the non-static parent container.
  <img src="path/image.jpg" width=500 height=500 style="--e-bolt-image-fit: contain; --e-bolt-image-position: center center;" class="e-bolt-image e-bolt-image--bg" alt="">

  // This background image will not stretch and it is positioned to top left of the non-static parent container.
  <img src="path/image.jpg" width=150 height=150 style="--e-bolt-image-fit: none; --e-bolt-image-position: top left;" class="e-bolt-image e-bolt-image--bg" alt="">
</div>