{"id":244748,"date":"2016-08-25T07:51:50","date_gmt":"2016-08-25T14:51:50","guid":{"rendered":"http:\/\/css-tricks.com\/?p=244748"},"modified":"2016-08-26T10:49:33","modified_gmt":"2016-08-26T17:49:33","slug":"use-cases-fixed-backgrounds-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/use-cases-fixed-backgrounds-css\/","title":{"rendered":"Use Cases for Fixed Backgrounds in CSS"},"content":{"rendered":"

File this into a category of personal “CSS Ah-Ha Moments<\/a>“.<\/p>\n

The background-attachment<\/code> 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.<\/p>\n

<\/p>\n

See the Pen QEPQqp<\/a> by Geoff Graham (@geoffgraham<\/a>) on CodePen<\/a>.<\/p>\n

Turns out a background with a fixed position can be much more useful than that. Adding the single line background-attachment: fixed;<\/code> 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.<\/p>\n

The Faux Slide Deck<\/h3>\n

Making a presentation? A single page broken up into “slides” is pretty straightforward:<\/p>\n

.slide {\r\n  background-image: url('path-to-url');\r\n  background-attachment: fixed;\r\n  height: 100vh;\r\n  width: 100%;\r\n}<\/code><\/pre>\n
When we call the .slide<\/code> element three times in our HTML, then we have slides that appear to overlap one another as the page scrolls down.<\/p>\n
See the Pen Scrolling Backgrounds in CSS – 01<\/a> by Geoff Graham (@geoffgraham<\/a>) on CodePen<\/a>.<\/p>\n
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<\/a>.<\/p>\n
The “Slide Over The Header” Header<\/h3>\n
Let’s say we wanted some fancy header that gets overlapped by content. We can do that as well.<\/p>\n
See the Pen akrJjY<\/a> by Geoff Graham (@geoffgraham<\/a>) on CodePen<\/a>.<\/p>\n
The Faux Transparency<\/h3>\n
Remember when classrooms had overhead projectors<\/a> and teachers would have to create what they called transparencies to present layered information? We can do the same!<\/p>\n
See the Pen Scrolling Backgrounds in CSS – Seattle Trip<\/a> by Geoff Graham (@geoffgraham<\/a>) on CodePen<\/a>.<\/p>\n
Other Awesome Examples<\/h3>\n
There are so many other great examples of this in action over on CodePen. Here’s are a few to feast on.<\/p>\n
Sliding Panels At The Beginning (But Also In The Middle) Of An Article<\/h4>\n
See the Pen RRJWAA<\/a> by Shane Zentz (@szentz<\/a>) on CodePen<\/a>.<\/p>\n
Angled And Transparent Overlapping Sections<\/h4>\n
See the Pen skewroll<\/a> by carpe numidium (@carpenumidium<\/a>) on CodePen<\/a>.<\/p>\n
Scrolling Flip Book<\/h4>\n
See the Pen Scroll Flip-Book<\/a> by Derek Palladino (@derekjp<\/a>) on CodePen<\/a>.<\/p>\n
Mid Article Background Header Breaks<\/h4>\n
See the Pen vKOvgJ<\/a> by Sam Stevenson (@samstevenson<\/a>) on CodePen<\/a>.<\/p>\n
Clipped Headers Within Fixed Panels<\/h4>\n
This one doesn’t actually use background-attachment, but it’s very cool and a related effect. <\/p>\n
See the Pen Gettin’ Clippy<\/a> by Stephen Scaff (@StephenScaff<\/a>) on CodePen<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
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.<\/p>\n","protected":false},"author":2508,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[18],"tags":[827,826,825,745],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":350201,"url":"https:\/\/css-tricks.com\/the-fixed-background-attachment-hack\/","url_meta":{"origin":244748,"position":0},"title":"The Fixed Background Attachment Hack","date":"August 27, 2021","format":false,"excerpt":"What options do you have if you want the body background in a fixed position where it stays put on scroll? background-attachment: fixed in CSS, at best, does not work well in mobile browsers, and at worst is not even supported by the most widely used mobile browsers. You can\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/background-boxes.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":358917,"url":"https:\/\/css-tricks.com\/fixed-background-effect\/","url_meta":{"origin":244748,"position":1},"title":"The Search For a Fixed Background Effect With Inline Images","date":"January 6, 2022","format":false,"excerpt":"I was working on a client project a few days ago and wanted to create a certain effect on an . See, background images can do the effect I was looking for somewhat easily with background-attachment: fixed;. With that in place, a background image stays in place\u2014even when the page\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/fixed-background.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":367270,"url":"https:\/\/css-tricks.com\/scroll-shadows-pure-css-parallax-game-back-on\/","url_meta":{"origin":244748,"position":2},"title":"Scroll Shadows? Pure CSS Parallax? Game Back On.","date":"July 29, 2022","format":false,"excerpt":"Chris calls scroll shadows one his favorite CSS-Tricks of all time. Lea Verou popularized the pure CSS approach using four layered background gradients with some clever background-attachment magic. The result is a slick scrolling interaction that gives users a hint that additional content is available in a scrollable container. CodePen\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/smooth-scroll.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1820,"url":"https:\/\/css-tricks.com\/blurry-background-effect\/","url_meta":{"origin":244748,"position":3},"title":"Blurry Background Effect","date":"December 22, 2008","format":false,"excerpt":"When setting a background image on a page element with CSS, you can control its position with \"background-position\", but an often-forgotten trick is that you can control its position behavior with \"background-attachment\". Utilizing two images, we can pull off a pretty simple and fun CSS trick I'm calling the \"blurry\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/bbe.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":190610,"url":"https:\/\/css-tricks.com\/design-considerations-text-images\/","url_meta":{"origin":244748,"position":4},"title":"Design Considerations: Text on Images","date":"December 12, 2014","format":false,"excerpt":"I enjoyed Erik D. Kennedy's post 7 Rules for Creating Gorgeous UI (Part 2). In it, his Rule 4 is: Learn the methods of overlaying text on images. I thought we could take a look at all his points, code them up, and note anything that comes up technically. Tinting\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":333608,"url":"https:\/\/css-tricks.com\/going-from-solid-to-knockout-text-on-scroll\/","url_meta":{"origin":244748,"position":5},"title":"Going From Solid to Knockout Text on Scroll","date":"February 3, 2021","format":false,"excerpt":"Here\u2019s a fun CSS trick to show your friends: a large title that switches from a solid color to knockout text as the background image behind it scrolls into place. And we can do it using plain ol\u2019 HTML and CSS! This effect is created by rendering two containers with\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/solid-knockout-text.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/244748"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=244748"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/244748\/revisions"}],"predecessor-version":[{"id":244948,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/244748\/revisions\/244948"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=244748"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=244748"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=244748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}