Bolt Design System

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

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`
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

npm install @bolt/components-background

Dependencies

@bolt/components-background-shapes

@bolt/core-v3.x

Background

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