Backgrounds, Shadows, Fonts, and the Cascade
Published 12 years, 5 months pastThe fact that this:
h1 {color: red;}
h1 {color: green;}
…results in green h1 text, but this:
h1 {background:
url(red-wave.gif) repeat,
url(green-wave.gif) repeat;}
…results in a red wavy h1 background does my head in every single time. And it’s the same with text and box shadows, too! In cases where backgrounds or shadows overlap, the first one you write “wins”, by virtue of being “in front of” the background images that are listed after it.
I know that font stacks are also done in order of most-to-least preferred, but I don’t see them as being equivalent. The reason is that a font stack is a list of fallbacks — use this face unless it can’t render the glyph or doesn’t exist, in which case try the next one in the list, etc., etc. Multiple background images and multiple shadows, on the other hand, are not a series of fallbacks. I expect to see them all, unless I made a mistake of some kind; and I do, constantly, because of this disconnect. Sure, one could use the multiple background image syntax to create a series of fallbacks — first an SVG file, second a PNG, third a GIF — but that’s not its primary purpose, and I certainly wouldn’t teach multiple background images that way. That’s not what they’re designed to do.
Maybe writing the problem down here will purge this daemon, but in all honesty, my hopes are not terribly high.
Comments (11)
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.
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.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.
Bummer. I too was astonished that it did not work how we expected it to. I think your post will help me remember.
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.
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”.
True, Curtis. I’ve updated the post to correct that. Thanks!
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?
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.
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!
Pingback ::
Some links for light reading (25/5/12) | Max Design
[…] Backgrounds, Shadows, Fonts, and the Cascade […]