background docs

Background

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

Published Last updated: 4.6.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
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

background

background opacity variations

Opacity: None

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.

Opacity: Light

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.

Opacity: Medium

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.

Opacity: Heavy

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.

Opacity: Full

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 focal variations

Heavy Opacity with Left Focal Point

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.

Heavy Opacity with Right Focal Point

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 shapes variations

Background Shapes: Shape Group A

circle-square
Outline Circle
square-square
Little Circle
square-square
Little Circle

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 Shapes: Shape Group B

square-square
Outline Circle
square-square
Little Circle
circle-circle
Outline Circle

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 Shapes: Shape Group A, Alignment Left

circle-square
Outline Circle
square-square
Little Circle
square-square
Little Circle

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 fill variations

Fill: Color

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.

Fill: Gradient

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 valign variations

Note: valign is an Image component prop, not a Background component prop. Set valign on images passed in via content_items to control the vertical alignment.

valign: center

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.

valign: top

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.

valign: bottom

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.

valign: 25%

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.