Background

An absolute positioned element that renders as a background (image, video, or shapes) inside relative positioned containers.

Published Last updated: 5.7.0 Change log Github NPM
Twig Usage 
{% set image %}
    {% include '@bolt-elements-image/image.twig' with {
      background: true,
      attributes: {
        src: '/images/content/backgrounds/background-tall-4.jpg',
        srcset: '/images/content/backgrounds/background-tall-4-50.jpg 50w, /images/content/backgrounds/background-tall-4-100.jpg 100w, /images/content/backgrounds/background-tall-4-200.jpg 200w, /images/content/backgrounds/background-tall-4-320.jpg 320w, /images/content/backgrounds/background-tall-4-480.jpg 480w, /images/content/backgrounds/background-tall-4-640.jpg 640w, /images/content/backgrounds/background-tall-4-800.jpg 800w, /images/content/backgrounds/background-tall-4-1024.jpg 1024w, /images/content/backgrounds/background-tall-4-1366.jpg 1366w, /images/content/backgrounds/background-tall-4-1536.jpg 1536w, /images/content/backgrounds/background-tall-4-1920.jpg 1920w, /images/content/backgrounds/background-tall-4-2560.jpg 2560w, /images/content/backgrounds/background-tall-4-2880.jpg 2880w, /images/content/backgrounds/background-tall-4.jpg 3840w',
        width: 3840,
        height: 2160
      },
    } only %}
  {% endset %}
{% include '@bolt-components-background/background.twig' with {
  opacity: 'heavy',
  fill: 'gradient',
  focal_point: {
    vertical: 'center',
    horizontal: 'center'
  },
  items: [
    image
  ]
} only %}
 Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
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 medium
  • none, light, medium, heavy, full
shape_group

Add a Bolt Background Shapes group.

 string none
  • A, B, none
shape_alignment

Alignment of shape group.

 string right
  • left or right
fill

Type of fill to use for the overlay.

 string color
  • color, gradient, linear-gradient, radial-gradient
fill_color

Color of the fill to use in the overlay.

 string default
  • default, pink, navy, black
focal_point

Where the opacity background should originate.

 object —
    • horizontal

      Currently only reverses gradient on 'left'.

      • center, left, right
items

An array of renderable items to place in the background.

 array —
  • [items]:
    • Type:any
overlay
(deprecated)

Use opacity instead

 — —
  • —
shapeGroup
(deprecated)

Use shape_group instead.

 — —
  • —
shapeAlignment
(deprecated)

Use shape_alignment instead.

 — —
  • —
fillColor
(deprecated)

Use fill_color instead.

 — —
  • —
focalPoint
(deprecated)

Use focal_point instead.

 — —
  • —
contentItems
(deprecated)

Use content_items instead.

 — —
  • —
content_items
(deprecated)

Use items instead (each item must be renderable, e.g. a string or render array. Arrays inteded to be rendered with pattern_template() are no longer supported)

 — —
  • —
Install Install 
npm install @bolt/components-background
Dependencies @bolt/components-background-shapes @bolt/core-v3.x @bolt/elements-image