{"id":196157,"date":"2015-02-17T15:08:58","date_gmt":"2015-02-17T22:08:58","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=196157"},"modified":"2017-06-06T16:39:47","modified_gmt":"2017-06-06T23:39:47","slug":"background-attachment","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-attachment\/","title":{"rendered":"background-attachment"},"content":{"rendered":"<p>The <code>background-attachment<\/code> property in CSS specifies how to move the background relative to the viewport.<\/p>\n<p>There are three values: <code>scroll<\/code>, <code>fixed<\/code>, and <code>local<\/code>. The best way to explain this is via demo (try scrolling the individual backgrounds):<\/p>\n<p data-height=\"400\" style=\"height: 400px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"wBeXZz\" data-default-tab=\"result\" data-user=\"tjacobdesign\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/tjacobdesign\/pen\/wBeXZz\/\" rel=\"noopener\">Background attachment demo<\/a> by Timothy Miller (<a href=\"http:\/\/codepen.io\/tjacobdesign\" rel=\"noopener\">@tjacobdesign<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>There are two different views to think about when talking about <code>background-attachment<\/code>: the main view (browser window), and the local view (you can see this in the demo above).<\/p>\n<p><code>scroll<\/code> is the default value. It scrolls with the main view, but stays fixed inside the local view.<\/p>\n<p><code>fixed<\/code> stays fixed no matter what. It&#8217;s kind of like a physical window: moving around the window changes your perspective, but it doesn&#8217;t change where things are outside of the window.<\/p>\n<p><code>local<\/code> was invented because the default <code>scroll<\/code> value acts like a fixed background. It scrolls both with the main view <em>and<\/em> the local view. There are some <a href=\"http:\/\/lea.verou.me\/2012\/04\/background-attachment-local\/\" rel=\"noopener\">pretty cool things<\/a> you can do with it.<\/p>\n<h3>Related<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-clip\/\">background-clip<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-color\/\">background-color<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-image\/\">background-image<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-origin\/\">background-origin<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-position\/\">background-position<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-repeat\/\">background-repeat<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-size\/\">background-size<\/a><\/li>\n<\/ul>\n<h3>More Resources<\/h3>\n<ul>\n<li><a href=\"http:\/\/www.w3.org\/TR\/css3-background\/#the-background-attachment\" rel=\"noopener\">CSS3 Spec<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/background-attachment\" rel=\"noopener\">MDN<\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<p>The <code>fixed<\/code> and <code>scroll<\/code> values are supported everywhere, although <code>fixed<\/code> can <a href=\"http:\/\/quirksmode.org\/css\/backgrounds-borders\/mobile.html#t00\" rel=\"noopener\">behave strangely on mobile<\/a>. <code>local<\/code> has this browser support:<\/p>\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=background-attachment\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">4<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">25<\/span><\/td><td class=\"y yep\" title=\"IE - \"><span class=\"caniuse-agents-version version\">9<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">12<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">5<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Android - \"><span class=\"caniuse-agents-version version\">4.2-4.3<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">12.2-12.5<\/span><\/td><\/tr><\/table><\/div><\/div>\n<p>Chrome-on-Android supports <code>local<\/code>, but the old Android browser does not.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The background-attachment property in CSS specifies how to move the background relative to the viewport. There are three values: scroll, fixed, and local. The best way to explain this is via demo (try scrolling the individual backgrounds): See the Pen Background attachment demo by Timothy Miller (@tjacobdesign) on CodePen. There are two different views to [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":13913,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","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":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":13963,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background\/","url_meta":{"origin":196157,"position":0},"title":"background","date":"August 31, 2011","format":false,"excerpt":"The background property in CSS allows you to control the background of any element (what paints underneath the content in that element). It is a shorthand property, which means that it allows you to write what would be multiple CSS properties in one. Like this: body { background: url(sweettexture.jpg) \/*\u2026","rel":"","context":"In \"background\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":345532,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/b\/backdrop\/","url_meta":{"origin":196157,"position":1},"title":"::backdrop","date":"August 3, 2021","format":false,"excerpt":"The ::backdrop CSS pseudo-element creates a backdrop that covers the entire viewport and is rendered immediately below a <dialog> or any element that enters fullscreen mode using the Fullscreen API. dialog::backdrop { background-color: darkorange; } The backdrop is selectable as a pseudo-element when an element is opened in the browser\u2019s\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/backdrop-diagram.png?fit=975%2C527&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":282511,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-padding\/","url_meta":{"origin":196157,"position":2},"title":"scroll-padding","date":"February 12, 2019","format":false,"excerpt":"scroll-padding is part of the CSS Scroll Snap Module. Scroll snapping refers to \u201clocking\u201d the position of the viewport to specific elements on the page as the window (or a scrollable container) is scrolled. Think of a scroll-snapping container like putting a magnet on top of an element that sticks\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/fingers-snap.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":14190,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/first-line\/","url_meta":{"origin":196157,"position":3},"title":"::first-line","date":"September 6, 2011","format":false,"excerpt":"The ::first-line pseudo-element is for applying styles to the first line of an element. Imagine a paragraph that is several lines long (like this one!). ::first-line allows you to style that first line of text. You could use it to make it larger or set it in small-caps as a\u2026","rel":"","context":"With 10 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":16536,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/position\/","url_meta":{"origin":196157,"position":4},"title":"position","date":"March 19, 2012","format":false,"excerpt":"The position property can help you manipulate the location of an element, for example: .element { position: relative; top: 20px; } Relative to its original position the element above will now be nudged down from the top by 20px. If we were to animate these properties we can see just\u2026","rel":"","context":"In \"position\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":196155,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-repeat\/","url_meta":{"origin":196157,"position":5},"title":"background-repeat","date":"February 17, 2015","format":false,"excerpt":"If a background-image property is specified, the background-repeat property in CSS defines if (and how) it will repeat. Here's an example: html { background-image: url(logo.png); background-repeat: repeat-x; } These are the possible values for this property (besides the usual stuff like inherit): repeat: tile the image in both directions. This\u2026","rel":"","context":"In \"background-repeat\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/196157"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=196157"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/196157\/revisions"}],"predecessor-version":[{"id":255617,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/196157\/revisions\/255617"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13913"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=196157"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=196157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}