{"id":8596,"date":"2011-02-25T13:09:40","date_gmt":"2011-02-25T20:09:40","guid":{"rendered":"http:\/\/css-tricks.com\/?p=8596"},"modified":"2019-05-30T07:45:16","modified_gmt":"2019-05-30T14:45:16","slug":"stacking-order-of-multiple-backgrounds","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/stacking-order-of-multiple-backgrounds\/","title":{"rendered":"Stacking Order of Multiple Backgrounds"},"content":{"rendered":"

Multiple background images is a cool feature of CSS3. The syntax is easy, you just comma separate them. I find it’s easiest\/best to use the background<\/code> shorthand property so you can declare the position and repeating and whatnot and keep them all grouped together. What isn’t obvious while looking at the syntax is which image is on top in the vertical stacking order when those images overlap. The spec is clear<\/a> in this regard and browser implementations follow. The first is on top and they go down from there.<\/p>\n

background: \r\n   url(number.png) 600px 10px no-repeat,  \/* On top,    like z-index: 4; *\/\r\n   url(thingy.png) 10px 10px no-repeat,   \/*            like z-index: 3; *\/\r\n   url(Paper-4.png);                      \/* On bottom, like z-index: 1; *\/<\/code><\/pre>\n

It’s like z-index<\/code> but this isn’t z-index<\/code>, it’s parts of one single element. <\/p>\n

I think it’s slightly confusing since it’s the opposite of how HTML works naturally. If all elements have the same z-index (and are positioned in some way and overlap) the last<\/strong> element will be on top, not the first. Not that big of a deal though, just need to learn it once. <\/p>\n

The big thing to remember is that if you were to use one of the backgrounds for a fully opaque \/ fully repeating image, list that one last not first, otherwise it will cover all the others up. <\/p>\n

Also remember that while multiple backgrounds is totally radical, the fallback for browsers that don’t support it is that it displays nothing at all for the background, so be careful there. The best way to handle it, as always, is Modernizr<\/a>. They even use it as the demo right on the homepage of their site (adjusted for clarity):<\/p>\n

.multiplebgs body {\r\n  \/* Use awesome multiple backgrounds here *\/\r\n}\r\n.no-multiplebgs body {\r\n  \/* laaaaaame fallback *\/\r\n}<\/code><\/pre>\n

These days (Update May 2019), I probably wouldn’t worry about that at all as browser support for this is extremely high. Plus you could do it in CSS like:<\/p>\n

@supports (background-image: url(foo.jpg), url(bar.jpg)) {\r\n  body { } \r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"

Multiple background images is a cool feature of CSS3. The syntax is easy, you just comma separate them. I find […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_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,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[],"class_list":["post-8596","post","type-post","status-publish","format-standard","hentry","category-articles"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":14001,"url":"https:\/\/css-tricks.com\/tabs-with-round-out-borders\/","url_meta":{"origin":8596,"position":0},"title":"Tabs with Round Out Borders","author":"Chris Coyier","date":"September 4, 2011","format":false,"excerpt":"A technique for a rounded tabs where the top corners are rounded, but also the bottom corners are rounded where they attach to the content area. \"Round out\" or \"flared\" borders, if you will.","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Pseudos.081.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Pseudos.081.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Pseudos.081.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Pseudos.081.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":1660,"url":"https:\/\/css-tricks.com\/jquery-robot\/","url_meta":{"origin":8596,"position":1},"title":"Building an Animated Cartoon Robot with jQuery","author":"Chris Coyier","date":"December 3, 2008","format":false,"excerpt":"Why? Aside from being a fun exercise, what purpose does something like this have? None that's plainly obvious. Its about as useful as a miniature ship in a bottle. Yet it does have an underlying purpose. It could inspire someone to look beyond the perceived constraints of web designers and\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/image-architecture.jpg?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/image-architecture.jpg?resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/image-architecture.jpg?resize=525%2C300 1.5x"},"classes":[]},{"id":312701,"url":"https:\/\/css-tricks.com\/learn-z-index-using-a-visualization-tool\/","url_meta":{"origin":8596,"position":2},"title":"Learn Z-Index Using a Visualization Tool","author":"Chris Coyier","date":"June 12, 2020","format":false,"excerpt":"There are some neat interactive demos in here from Thiru Manikandan. There are a couple of very tricky things with z-index that never fail to confuse. In addition to things like requiring positioning and source order, the trickiest are the stacking contexts and parent\/child relationships. z-index isn't a flat playing\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/Screen-Shot-2020-06-11-at-6.53.56-AM.png?fit=1200%2C952&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/Screen-Shot-2020-06-11-at-6.53.56-AM.png?fit=1200%2C952&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/Screen-Shot-2020-06-11-at-6.53.56-AM.png?fit=1200%2C952&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/Screen-Shot-2020-06-11-at-6.53.56-AM.png?fit=1200%2C952&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/Screen-Shot-2020-06-11-at-6.53.56-AM.png?fit=1200%2C952&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":209060,"url":"https:\/\/css-tricks.com\/css-stacking-contexts\/","url_meta":{"origin":8596,"position":3},"title":"CSS Stacking Contexts","author":"Chris Coyier","date":"October 1, 2015","format":false,"excerpt":"Tiffany B. Brown breaks down what stacking contexts are in a very quick and understandable way. First, what makes a new context, then: Children of a stacking context are painted from bottom to top in the following order. Elements with a negative stack level, typically elements with z-index: -1 Elements\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":359260,"url":"https:\/\/css-tricks.com\/topological-sort\/","url_meta":{"origin":8596,"position":4},"title":"Topological sort","author":"Chris Coyier","date":"December 16, 2021","format":false,"excerpt":"Jordan Scales explores the computer science concept of topological sorting, and what it might look like if applied to the concept of z-index in CSS. So, you don't express what the z-index should be directly; instead, you say exactly what other element you want to be on top of. I\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/z-index.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/z-index.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/z-index.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/z-index.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/z-index.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":514,"url":"https:\/\/css-tricks.com\/links-of-interest-18\/","url_meta":{"origin":8596,"position":5},"title":"Links of Interest","author":"Chris Coyier","date":"February 19, 2008","format":false,"excerpt":"C.S.I in XHTML and CSS coding. Dor Dan has a nice article on keeping both your HTML and CSS clean with a consistent system of Comments, Spacing, and Indents. Now that's some beautiful code. \u00a0 Detailed Look at Stacking in CSS Tim Kadlec takes an in-depth look at the \"stacking\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/8596","targetHints":{"allow":["GET"]}}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=8596"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/8596\/revisions"}],"predecessor-version":[{"id":288635,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/8596\/revisions\/288635"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=8596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=8596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=8596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}