Background Component with a Valign Examples of a Background Component with the different valign options.
Important Notes: Alignment of an background image can be achieved by leveraging the Image Element's attributes prop with the a CSS var. Please refer to the fit and position documentation for more information.
Demo

Background Component with an image vertically centered

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Background Component with an image vertically aligned to top

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Background Component with an image vertically aligned to bottom

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Background Component with an image vertically aligned 25% from top

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Twig
{% set image %}
  {% include '@bolt-elements-image/image.twig' with {
    background: true,
    attributes: {
      src: '/images/placeholders/backgrounds/background-light-tall.jpg',
      srcset: '/images/placeholders/backgrounds/background-light-tall-640.jpg 640w, /images/placeholders/backgrounds/background-light-tall-1024.jpg 1024w, /images/placeholders/backgrounds/background-light-tall-1920.jpg 1920w',
      width: 4320,
      height: 2880,
      style: '--e-bolt-image-position: center center;',
    },
  } only %}
{% endset %}

{% include '@bolt-components-background/background.twig' with {
  opacity: 'medium',
  items: [
    image
  ]
} only %}
HTML
Not available in plain HTML. Please use Twig.