Background
An absolute positioned element that renders as a background (image, video, or shapes) inside relative positioned containers.
{% 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',
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 %}| 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
|
|
|
shape_group
|
Add a Bolt Background Shapes group. |
string
|
none
|
|
|
shape_alignment
|
Alignment of shape group. |
string
|
right
|
|
|
fill
|
Type of fill to use for the overlay. |
string
|
color
|
|
|
fill_color
|
Color of the fill to use in the overlay. |
string
|
default
|
|
|
focal_point
|
Where the opacity background should originate. |
object
| — |
|
|
content_items
|
An array of objects to place in the background.Works with Image and Shape components.Video option is deprecated. |
array
| — |
|
|
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. |
— | — |
|
npm install @bolt/components-backgroundOpacity: 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.
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: Shape Group A
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
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
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: 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.
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.