📌 Introduction

The background-attachment property in CSS controls how a background image behaves when the page is scrolled. It determines whether the background scrolls with the page, stays fixed, or scrolls relative to the element's content. This is especially useful for creating **parallax effects**, fixed hero backgrounds, or scroll-based UI designs. 🎨✨

🎯 What Does background-attachment Do?

✨ Syntax

selector {
  background-attachment: scroll | fixed | local;
}

🧩 Available Values

1. scroll (default)

The background image moves **along with the page**. This is the default behavior of most elements.

background-attachment: scroll;

2. fixed

The background image stays **fixed to the viewport**, even when scrolling. This creates the classic **parallax scrolling effect**.

background-attachment: fixed;

3. local

The background scrolls with the element’s **content**, not the entire page. Useful for scrollable containers.

background-attachment: local;

🔥 Practical Examples

1. Parallax Hero Section (fixed)

.hero {
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 400px;
}

2. Normal Scrolling Background (scroll)

.normal {
  background-image: url("pattern.png");
  background-repeat: repeat;
  background-attachment: scroll;
}

3. Scrollable Container Background (local)

.scroll-box {
  width: 300px;
  height: 200px;
  overflow: auto;
  background-image: url("bg.jpg");
  background-attachment: local;
}

🧩 Using Multiple Background Layers

Each background layer can have its own background-attachment value.

background-image: url("layer1.png"), url("layer2.png");
background-attachment: fixed, scroll;

📊 Summary Table

🖼️ Visual Demo

🎉 Conclusion

The background-attachment property is simple but incredibly powerful. Whether you want a fixed parallax background, a normal scrolling background, or a scrollable UI container with dynamic backgrounds—this property gives you precise control. Master it to create modern, engaging, and visually immersive designs. 🚀