background docs

Background

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

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

background

Alt text.

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: alignment of an image can be achieved by passing inline styles to the Image element's attributes objects. Then you can pass the Image element to the Background component via items.

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.