Comments on: Backgrounds, Shadows, Fonts, and the Cascade

By: Some links for light reading (25/5/12) | Max Design

Some links for light reading (25/5/12) | Max Design — Thu, 24 May 2012 23:22:52 +0000

[...] Backgrounds, Shadows, Fonts, and the Cascade [...]

By: Eric Meyer

Eric Meyer — Fri, 18 May 2012 14:00:27 +0000

I’ve tried that, Matt, and it still doesn’t take. My best hope, I think, is to link it to font stacks and hope that over time the two become mentally intertwined. I’ve got the cascade on my brain, baby, and it just won’t let go!

…actually, there’s another hurdle I didn’t recognize until just now: auto z-index. Images overlap in the reverse order that auto z-index elements would overlap, and visually, they’re the closest analogue to each other.

Damn it!

By: Matt Wilcox

Matt Wilcox — Fri, 18 May 2012 13:55:17 +0000

Eric: think of those declarations *exactly* as you would see the layers pallet in Photoshop. Even the way you’ve written it emphasises that heirarchy.

Whichever is higher in the list is also physically above the others. You are stacking images one top of each other, and the stacking order is physically identical to how you’re writing it.

By: Virginia

Virginia — Thu, 17 May 2012 16:33:48 +0000

The fact that’s is so confusing is why it always takes 10 minutes or lots of typing to explain it to anyone. Wouldn’t it be nice if it followed the pattern used in other elements?

By: Eric Meyer

Eric Meyer — Thu, 17 May 2012 01:12:37 +0000

True, Curtis. I’ve updated the post to correct that. Thanks!

By: Curtis Jurgensen

Curtis Jurgensen — Thu, 17 May 2012 00:43:38 +0000

To add to the confusion… neither of your wave images will display with the current CSS. You’ll need to drop the background-position values or use “background” instead of “background-image”.

By: Adam Norwood

Adam Norwood — Wed, 16 May 2012 22:53:31 +0000

I’ll definitely agree that it’s confusing when viewed next to other CSS declarations, but after years of staring at Photoshop the multiple background image syntax makes some intuitive sense to me: if you put a line break between each background definition as Eric has done above, it sort of resembles the top-to-bottom behavior of the Photoshop layers palette (with the final definition being the furthest “back” in the stack)! In any case, that’s how I visualize it.

By: PatrickClay

PatrickClay — Wed, 16 May 2012 15:38:08 +0000

Bummer. I too was astonished that it did not work how we expected it to. I think your post will help me remember.

By: Chriztian Steinmeier

Chriztian Steinmeier — Wed, 16 May 2012 14:49:44 +0000

I’m pretty confident that the fact that I now have a reference-point in my head to this post, I will actually begin to remember how this works. So thanks!

Also – I’ve finally learned that only the last in the list is allowed to also specify a color, which makes perfectly sense, now that I know the order they’re supposed to be in.

By: David Paul Ellenwood

David Paul Ellenwood — Wed, 16 May 2012 14:31:17 +0000

Ditto! I have to go look up how to do multiple background declarations every time because of this exact issue. @Susanna K. - You're correct in stating the examples are not exactly the same, but the first example could just as easily be: h1 {color: red; color: green;} and the issue would remain.

By: Susanna K.

Susanna K. — Wed, 16 May 2012 14:20:31 +0000

But those two statements are not equivalent. In the first one, you have a later h1 overwriting a previous one. In the second, you have a single h1 declaration. If you had two h1′s with the first containing the red.png and the second containing the green.png, the green would win.

That being said, you do have a point about how attributes within a single declaration could work.