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.
I love the slide over the header header. That’s such a common thing that just became easier! I think the nicest thing about that approach is that it’ll result in zero extraneous markup.
The flip book is cute too. Can’t see myself ever building it, but still, that’s cool.
Great job Geoff.
Thanks Sean! It was a lot of fun looking into all the ways this can be used other than the obvious.
What a solid resource this is. Thank you!
Love this! Makes me wanna get creative and try some of these out – thanks for the post.
Now these are true CSS Tricks — except for the last example, no JavaScript needed. Very nicely done. This is already bookmarked for future reference.
I’ve tested some of the demos on iOS. There’s a glitch when swiping up/down to scroll the page; if the initial tap is over a fixed background image, the page sometimes gets stuck. Can someone reproduce?
I think none of the demos seem to work in iOS – at least they fail on my iPad (Pro).
;-(
It won’t work in iOS Safari.
http://caniuse.com/#search=background-attach
I forgot to mention, yes, it’s not supported on iOS, but that’s not the problem since the fallback is acceptable. The problem is the glitch. Try tapping the background image and then swiping up/down to scroll. Does the page glitch out for a moment and then get stuck?
Very interesting post. 5 thumbs up…
You might want to change your wording about “full browser support” since it is basically unavailable in all mobile browsers. http://caniuse.com/#feat=background-attachment I started reading this article on mobile chrome and was very confused about what I was looking at.
Good call, done and handled!
That’s a great collection of things you can do with the background. I specially like the sliding panels with the tree background and the one with the diagonal images. I will have to study them some more and see exactly what makes them tick :)
I about died laughing at the mention of Geocities. A good memory. But this is an excellent set of examples of things many never think about
Great article! I feel we over complicated builds sometimes so it’s refreshing to see simple ways to achieve these effects!
background-attachment: fixed; causes constant repaints when scrolling, turn on paint flashing in chrome dev tools and have a look.