Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Backgrounds, Shadows, Fonts, and the Cascade

The 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.

11 Responses»

    • #1
    • Comment
    • Wed 16 May 2012
    • 1020
    Susanna K. wrote in to say...

    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.

    • #2
    • Comment
    • Wed 16 May 2012
    • 1031
    David Paul Ellenwood wrote in to say...

    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.

    • #3
    • Comment
    • Wed 16 May 2012
    • 1049
    Chriztian Steinmeier wrote in to say...

    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.

    • #4
    • Comment
    • Wed 16 May 2012
    • 1138
    PatrickClay wrote in to say...

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

    • #5
    • Comment
    • Wed 16 May 2012
    • 1853
    Adam Norwood wrote in to say...

    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.

    • #6
    • Comment
    • Wed 16 May 2012
    • 2043
    Curtis Jurgensen wrote in to say...

    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”.

    • #7
    • Comment
    • Wed 16 May 2012
    • 2112
    Eric Meyer wrote in to say...

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

    • #8
    • Comment
    • Thu 17 May 2012
    • 1233
    Virginia wrote in to say...

    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?

    • #9
    • Comment
    • Fri 18 May 2012
    • 0955
    Matt Wilcox wrote in to say...

    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.

    • #10
    • Comment
    • Fri 18 May 2012
    • 1000
    Eric Meyer wrote in to say...

    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!

    • #11
    • Pingback
    • Thu 24 May 2012
    • 1922
    Received from Some links for light reading (25/5/12) | Max Design

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

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...

May 2012
April June