Exploring the background-attachment Property in CSS

Introduction

mefengl
2 min readOct 5, 2023

The background-attachment property in CSS dictates how a background image behaves when a user scrolls a page or an element. The property can have three values: fixed, scroll, and local. Each offers a unique behavior, allowing for a wide range of visual effects. This blog post will explore these different behaviors and present a hands-on example for you to try out.

The Three Values

background-attachment: fixed

When set to fixed, the background image stays fixed with respect to the browser’s viewport. This is particularly useful for creating parallax scrolling effects.

Example Code

.fixed {
background-image: url('image_url');
background-attachment: fixed;
}

Use Case

  • Parallax scrolling effects
  • Adding a sense of depth to your website

background-attachment: scroll

This is the default behavior where the background image scrolls along with the content of the page or element.

Example Code

.scroll {
background-image: url('image_url');
background-attachment: scroll;
}

Use Case

  • Standard websites without any special scrolling effects

background-attachment: local

When set to local, the background image will scroll along with the content of a scrollable element.

Example Code

.local {
background-image: url('image_url');
background-attachment: local;
overflow: auto;
height: 300px;
}

Use Case

  • Scrollable sidebars or sections within a page
  • Creating interactive UI components like scrollable cards

Hands-on Example

Here’s some HTML and CSS code for you to try out these different background-attachment behaviors:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Background Attachment Test</title>
<style>
body, .scroll, .fixed {
height: 2000px;
width: 100%;
}
.fixed {
background-image: url('https://via.placeholder.com/150');
background-repeat: no-repeat;
background-attachment: fixed;
}
.scroll {
background-image: url('https://via.placeholder.com/150');
background-repeat: no-repeat;
background-attachment: scroll;
}
.local {
background-image: url('https://via.placeholder.com/150');
background-repeat: no-repeat;
background-attachment: local;
height: 300px;
overflow: auto;
}
</style>
</head>
<body>
<div class="fixed">
<h2>Fixed Background</h2>
</div>
<div class="scroll">
<h2>Scroll Background</h2>
</div>
<div class="local">
<h2>Local Background</h2>
<p>Additional content to make this box scrollable.</p>
<p>Additional content to make this box scrollable.</p>
<p>Additional content to make this box scrollable.</p>
<p>Additional content to make this box scrollable.</p>
<p>Additional content to make this box scrollable.</p>
<p>Additional content to make this box scrollable.</p>
<p>Additional content to make this box scrollable.</p>
<p>Additional content to make this box scrollable.</p>
</div>
</body>
</html>

Conclusion

The background-attachment property is a powerful tool for controlling the behavior of background images. Whether you’re going for a fixed, scrolling, or locally-scrolling background, understanding this property can significantly enrich the user experience on your website.

--

--