? CSS Background Attachment

⚡ Quick Overview

The background-attachment property in CSS controls how a background image behaves when the user scrolls the content of the page. It can:

Scroll together with the page content
Stay fixed in place while the content moves
Behave relative to the element’s own scroll area

Use this property to create effects like parallax scrolling or to keep background images visually anchored.

? Key Concepts

scroll (default) — the background image moves when the page is scrolled.
fixed — the background image stays fixed relative to the viewport, creating a parallax-like effect.
local — the background moves only when the element’s own content scrolls.
Often used together with background-position and background-size for precise control.

? Syntax

? View Code Example

/* Basic syntax for background-attachment */
selector {
  background-attachment: scroll;
}

selector {
  background-attachment: fixed;
}

selector {
  background-attachment: local;
}

? Examples

Here is a CSS example showing all three background-attachment values in action:

? View Code Example

/* Scroll with the page content (default behavior) */
.container {
  background-image: url("https://via.placeholder.com/300x150");
  background-attachment: scroll;
  background-position: center;
  background-size: cover;
}

/* Fixed relative to the viewport - parallax style */
.fixed-background {
  background-image: url("https://via.placeholder.com/300x150");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

/* Moves with the element's own scroll area */
.local-background {
  background-image: url("https://via.placeholder.com/300x150");
  background-attachment: local;
  background-position: center;
  background-size: cover;
}

? Live Demo: Fixed Background

This box has a background image with background-attachment: fixed. When you scroll the page, the background stays in place while the rest of the content moves.

On desktop screens, background-attachment: fixed is commonly used for hero sections and parallax scrolling effects. On some mobile browsers, this value may be ignored or may impact performance.

? Background Attachment & Related Properties

These properties are often used together to control how background images look and behave:

Property	Description	Example Value
`background-attachment`	Defines how the background image behaves when scrolling	`scroll`, `fixed`, `local`
`background-position`	Sets the starting position of the image	`center`, `top left`
`background-size`	Controls the size of the image relative to the element	`cover`, `contain`

? Tips & Best Practices

Use background-attachment: fixed for large, high-quality images to create a smooth parallax effect on desktop.
Always test background-attachment: fixed on mobile devices — some browsers may not support it well or may cause performance issues.
Use background-attachment: local when you have scrollable containers (like chat boxes or panels) and want the background to move with the inner content.
Combine background-size: cover with a fixed attachment to ensure the image fills the entire area without distortion.

? Try It Yourself

Create a full-width section with a background image and experiment with background-attachment: scroll, fixed, and local.
Observe how background-attachment: fixed behaves when you scroll the page compared to scroll.
Combine background-attachment: fixed with background-size: cover and different background-position values to design a simple parallax hero section.

? View Starter Code

/* Starter layout to practice background-attachment */
.hero-section {
  height: 60vh;
  background-image: url("https://via.placeholder.com/1200x600");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.content-section {
  padding: 24px;
}