File this into a category of personal "CSS Ah-Ha Moments".

The background-attachment property has never seemed all that useful to me. I have always looked at it as some sort of old school design trick from the GeoCities days to get a repeating background to stay in place during scroll.

Turns out a background with a fixed position can be much more useful than that. Adding the single line background-attachment: fixed; to an element can actually give us some power for making smooth, graceful transitions between content in a way that adds to the user experience without any other dependencies, like Javascript or intense animations.

#The Faux Slide Deck

Making a presentation? A single page broken up into "slides" is pretty straightforward:

.slide {
  background-image: url('path-to-url');
  background-attachment: fixed;
  height: 100vh;
  width: 100%;
}

When we call the .slide element three times in our HTML, then we have slides that appear to overlap one another as the page scrolls down.

No libraries. No scroll-jacking. Pure CSS with full browser support (well, minus touch screens). Might be a fun thing to pair with CSS Scroll Snap Points.

#The "Slide Over The Header" Header

Let's say we wanted some fancy header that gets overlapped by content. We can do that as well.

#The Faux Transparency

Remember when classrooms had overhead projectors and teachers would have to create what they called transparencies to present layered information? We can do the same!

#Other Awesome Examples

There are so many other great examples of this in action over on CodePen. Here's are a few to feast on.

#Sliding Panels At The Beginning (But Also In The Middle) Of An Article

#Angled And Transparent Overlapping Sections

#Scrolling Flip Book

#Mid Article Background Header Breaks

#Clipped Headers Within Fixed Panels

This one doesn't actually use background-attachment, but it's very cool and a related effect.