Background
An absolute positioned element that renders as a background (image, video, or shapes) inside relative positioned containers.
{% set image %}
{% include '@bolt-elements-image/image.twig' with {
background: true,
attributes: {
src: '/images/placeholders/backgrounds/background-light-tall.jpg',
srcset: '/images/placeholders/backgrounds/background-light-tall-640.jpg 640w, /images/placeholders/backgrounds/background-light-tall-1024.jpg 1024w, /images/placeholders/backgrounds/background-light-tall-1920.jpg 1920w',
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 %}| 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
| — |
|
|
items
|
An array of renderable items to place in the background. |
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. |
— | — |
|
|
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) |
— | — |
|
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: 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.