Background attachment

Class reference

# Fixed

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

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

# Local

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

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

# Scroll

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>

# 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.