Background attachment
Utilities for controlling how a background image behaves when scrolling
Class reference
Fixed
Use .bg-fixed
to fix the background image relative to the viewport.
Local
Use .bg-local
to scroll the background image with the container and the viewport.
Scroll
Use .bg-scroll
to scroll the background image with the viewport, but not with the container.
Responsive
To control the background attachment of an element at a specific breakpoint, add a {screen}:
prefix to any existing background attachment utility. For example, use md:bg-fixed
to apply the bg-fixed
utility at only medium screen sizes and above.
<div class="bg-local **md:bg-fixed** ...">
<!-- ... -->
</div>
For more information about Elements' responsive design features, check out the [Responsive Design](/css/responsive-design) documentation.
On this Page
v1.13.5