Background attachment

Utilities for controlling how a background image behaves when scrolling

Class reference

bg-fixedbackground-attachment: fixed;
bg-localbackground-attachment: local;
bg-scrollbackground-attachment: scroll;


Use .bg-fixed to fix the background image relative to the viewport.

<div class="bg-fixed ..." style="background-image: url(...)"></div>


Use .bg-local to scroll the background image with the container and the viewport.

<div class="bg-local ..." style="background-image: url(...)"></div>


Use .bg-scroll to scroll the background image with the viewport, but not with the container.

<div class="bg-scroll ..." style="background-image: url(...)"></div>


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** ...">
<!-- ... -->

For more information about Elements' responsive design features, check out the [Responsive Design](/css/responsive-design) documentation.