Background

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

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-background/background.twig" with {
  opacity: "heavy",
  fill: "gradient",
  focal_point: {
    vertical: "center",
    horizontal: "center"
  },
  content_items: [
    {
      pattern: "image",
      src: "/images/content/backgrounds/background-tall-4.jpg"
    }
  ]
} 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, indigo
focal_point

Where the opacity background should originate.

object
    • horizontal

      Currently only reverses gradient on 'left'.

      • center, left, right
content_items

An array of objects to place in the background.Works with Image and Shape components.Video option is deprecated.

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.

Install Install
  npm install @bolt/components-background
Dependencies @bolt/components-background-shapes @bolt/core-v3.x