CSS Quikie: background-attachment

Background images on the web are a fundamental aspect of design. They provide a vast amount of benefits to legibility, contrast, attraction, and focus. So it’s easy to say that getting them right is important. Well, one of those ways to ensure that is by investing in knowing about the property background-attachment.

This is a cool property because it allows you to dictate how the specified background image handles the element it’s attached to scroll events. There are three allocated options:

• scroll: This is the default CSS spec value. The background image will not scroll with the content
• local: Scrolls along with the content of the element, if it is scrollable
• fixed: With this, the background will stay fixed when you scroll the page or element

For more context on how to set up, let’s look at some code.

.Element {
  background-image: url('test.png');
}

.Element--scroll {
  background-attachment: scroll;
}

.Element--local {
  background-attachment: local;
}

.Element--fixed {
  background-attachment: fixed;
}