Background

An absolute positioned element that renders as a background (image, video, or shapes) inside relative positioned containers.
Twig Usage 
{% 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: 3840,
        height: 2160,
      },
    } only %}
  {% endset %}
  <div style="height: 400px; position: relative;" class="t-bolt-black">
    {% include '@bolt-components-background/background.twig' with {
      fill: 'gradient',
      items: [
        image,
      ]
    } only %}
  </div>
 Schema
Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this component.

 object —
  • —
opacity

Overlay opacity

 string none
  • none, light, medium, heavy, full
fill

Type of fill to use for the overlay.

 string solid
  • solid or gradient
focal_point

Point where the background gradient highlight should originate.

 object —
    • horizontal

      X-axis positioning for the background focal point

      • center, left, right
    • vertical

      Y-axis positioning for the background focal point

      • center, top, bottom
video

Set to true if you like to use video as a background.

 boolean false
  • —
video_toggle_button

A Drupal-rendered button that will play and pause a background video.

 any —
  • —
items

An array of renderable items to place in the background.

 array —
  • [items]:
    • Type:any
shape_group

Add a Bolt Background Shapes group.

 string none
  • A, B, none
shape_alignment

Alignment of shape group.

 string right
  • left or right
Install Install 
npm install @bolt/components-background
Dependencies @bolt/components-background-shapes @bolt/core @bolt/elements-image