Background Attachment
Set the scroll behavior for background images.
Limited availability
This feature does not work in some of the most widely-used browsers.
Chrome
Edge
Firefox
SafariDesktop only
Usage
Scroll
The background image scrolls with the element.
Scroll through the image to see its behavior.
London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill. London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
<div class="o-auto max-h-80 p-5 ba-s bs-c ff-c fs-xxl fw-700 ta-c" style="background-image: url(/img/sea.jpg);"> London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall.</div>Fixed
The background image remains fixed when scrolling.
Scroll the page to see its behavior.
London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill. London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
<div class="o-auto max-h-80 p-5 ba-f bs-c ff-c fs-xxl fw-700 ta-c" style="background-image: url(/img/sea.jpg);"> London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall.</div>Local
The background image scrolls with the element content.
Scroll through the image to see its behavior.
London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill. London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
<div class="o-auto max-h-80 p-5 ba-l bs-c ff-c fs-xxl fw-700 ta-c" style="background-image: url(/img/sea.jpg);"> London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall.</div>Responsiveness
Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.
Target viewport sizes with breakpoint prefixes.
sm:ba-*Small≥640px
md:ba-*Medium≥768px
lg:ba-*Large≥1024px
xxl:ba-*Extra Large≥1536px
Hover State
Apply styles conditionally on hover using the h: prefix.
Add the h: prefix to apply styles only when the user hovers over the element.
Syntax:
h:ba-*