Use Cases for Fixed Backgrounds in CSS
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. 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.
Use Cases for Fixed Backgrounds in CSS is a post from CSS-Tricks
