Background Component with a Fill Examples of a Background Component with the solid and gradient fill options.
Important Notes: When using the fill prop consider using an opacity prop as well. For more information on the opacity prop, reference the Background Opacity documentation.
Demo

Background Component with Solid Fill

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 Gradient Fill

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
    },
  } only %}
{% endset %}

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