{% 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-background