Learn the Front-end Beta Search

background-attachment

Definition

The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.

Syntax

.hero {
  background-image: url("/images/mountains.jpg");
  background-attachment: fixed;
}

Values

  • scroll: background scrolls with the element (default).
  • fixed: pins the background relative to the viewport for a subtle parallax feel.
  • local: background scrolls with the element’s content box (useful for scrollable cards).

Practical Examples

.feature {
  background: url("https://images.unsplash.com/photo-1521295121783-8a321d551ad2?auto=format&fit=crop&w=900&q=80") center/cover no-repeat;
  background-attachment: fixed;
}

.feature--card {
  max-height: 18rem;
  overflow-y: auto;
  background-attachment: local;
}

Switch between fixed and local to control how imagery behaves within scrollable regions.

HTML

background-attachment: fixed

background-attachment: local

Scroll inside this card to see how the background moves with the content.

Using background-attachment: local keeps the texture anchored to the scrolling container.

Code
<div class="space-y-6">
  <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">background-attachment: fixed</p>
    <div class="h-40 rounded-lg border border-slate-200" style="background: url('https://images.unsplash.com/photo-1521295121783-8a321d551ad2?auto=format&fit=crop&w=800&q=80') center/cover no-repeat fixed;"></div>
  </div>
  <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">background-attachment: local</p>
    <div class="h-40 overflow-y-auto rounded-lg border border-slate-200" style="background: url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=800&q=80') center/cover no-repeat local;">
      <div class="space-y-3 bg-white/80 p-4 text-sm text-slate-700 backdrop-blur">
        <p>Scroll inside this card to see how the background moves with the content.</p>
        <p>Using <code>background-attachment: local</code> keeps the texture anchored to the scrolling container.</p>
      </div>
    </div>
  </div>
</div>

Tips & Best Practices

  • Reserve fixed attachments for large viewports; on mobile Safari the value is treated like scroll.
  • Avoid heavy image files for parallax effects to keep scrolling smooth.
  • Pair local with overflow to create subtle textures inside scrollable panels.

Accessibility & UX Notes

Ensure overlaid text remains legible when the background scrolls independently; offer a solid overlay if content becomes hard to read.

Browser Support

Fully supported in evergreen browsers. Mobile Safari ignores fixed and behaves like scroll, so test on iOS.

  • background-position to align imagery when attachment changes perspective.
  • background-size for responsive cropping.
  • overflow for controlling scrollable containers that rely on local attachments.

Related posts