Use Cases for Fixed Backgrounds in CSS

Avatar of Geoff Graham
Geoff Graham on (Updated on )

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.

See the Pen QEPQqp by Geoff Graham (@geoffgraham) on CodePen.

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.

See the Pen Scrolling Backgrounds in CSS – 01 by Geoff Graham (@geoffgraham) on CodePen.

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.

See the Pen akrJjY by Geoff Graham (@geoffgraham) on CodePen.

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!

See the Pen Scrolling Backgrounds in CSS – Seattle Trip by Geoff Graham (@geoffgraham) on CodePen.

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

See the Pen RRJWAA by Shane Zentz (@szentz) on CodePen.

Angled And Transparent Overlapping Sections

See the Pen skewroll by carpe numidium (@carpenumidium) on CodePen.

Scrolling Flip Book

See the Pen Scroll Flip-Book by Derek Palladino (@derekjp) on CodePen.

Mid Article Background Header Breaks

See the Pen vKOvgJ by Sam Stevenson (@samstevenson) on CodePen.

Clipped Headers Within Fixed Panels

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

See the Pen Gettin’ Clippy by Stephen Scaff (@StephenScaff) on CodePen.