pennypacker.net: Pullquotes and Multiple Background Images with CSS

Pullquotes and Multiple Background Images with CSS

WebKit, the rendering engine beind Apple's Safari, and Konqueror has improved. With these improvements, designers have a new tool in their arsenal: Multiple background images. But as with any new rendering ability, there's that nagging feeling about how it will degrade when viewed in older browsers, especially when the most popular browser is the venerable Internet Explorer. But that doesn't mean that we have to abandon the technology, it just leaves us with a "Good, Better, Best" design environment.

Figuring out the syntax can be tricky, and sometimes can seem counter intuitive, but multiple background images in CSS is a very powerful tool that designers can leverage to their advantage.

Before I get to how multiple CSS background images can degrage gracefully in older browsers, let's first discuss the syntax and how to style a page with multiple background images. Figuring out the syntax can be tricky, and sometimes can seem counter intuitive, but multiple background images in CSS is a very powerful tool that designers can leverage to their advantage. Gleaning information from the W3's CSS3 Working Draft, it shows that the syntax for multiple images is much like the CSS1 syntax except that we use a comma delimited list of attributes in each declaration. For example:

div {
background-image: url("top.png"), url("bottom.png");
}

That tells the browser that there are two background images to be used and it stacks each image below the previous. So, if this example were in use and those background images over-lapped, top.png would appear above bottom.png in the stacking order (think: z-index)

The rest of the background declarations will follow suit using comma delimited lists and they will apply to in the same order. For example, if we add a line for background position to our style sheet:

div {
background-image: url("top.png"), url("bottom.png");
background-position: top center, bottom center;
}

The top.png image will be top and center, and bottom.png will be bottom center. You can add rules for repeat or whatever suits your fancy, most notable is the addition of background-position which empowers the designer to place the image at an exact location.

As an example for this technique, I'm going use a pull-quote, and for my best case scenario, I want it to look like this:

This requires that I use 9 images. Technically it only requires 8 because the center is a solid color, but I'm using 9 to illustrate the technique. Those 9 images are:

• top-left
• top-center
• top-right
• middle-left
• middle-center
• middle-right
• bottom-left
• bottom-center
• bottom-right

I think you can figure out how I plan on using them by what's been covered. The important thing to remember is the stacking order. So in the style sheet, they have to be declared in a particular order so that they overlap properly. The CSS should list the corners first, since they are not to be overlapped, then the sides, top, and bottom because they are to be overlapped by the corners, and last the very center image because it is to be overlapped by everything else.

Safari, Shiira, and from what I understand, Konqueror, will render this CSS properly and create the Best case design scenario. Firefox and Opera will ignore the declarations that it doesn't understand (the comma separated lists), and just use default rendering, which is really the worst case design scenario that you'd expect from ancient browsers like Netscape Navigator 3.0.

Now, we need to create an alternate design for our Better scenario. This design can only use one image and will rely on CSS1 and CSS2. I've chosen to create an alternate image to be placed in the top-left corner and a different background color. Here's a picture of it:

To achieve this look while preserving the Best case scenario is pretty straightforward. Since other modern browsers ignore our CSS3 declarations, all we have to do is add a CSS2 declaration first like so:

blockquote {
background: #fffbc1 url("i/quote-alt.png") 0 0 no-repeat;
}

Now our page renders in the Best case scenario in Safari, Shiira, and Konqueror; Better in Firefox and Opera. Now we step back into Good with Internet Explorer for both Windows and Macintosh. IE doesn't ignore the declarations that it doesn't understand, it chokes on them and renders nothing. So our CSS3 declarations do take precedence over the the CSS2 ones, but IE can't understand them, so they really just overwrite the style with nothing. But just as IE's 4 year old rendering weaknesses are a thorn in our side, we can use them to our advantage. IE doesn't understand the child selector in css (>), so we can massage the CSS a little bit to prey upon IE's weakness.

For our Good Scenario, our pull-quotes will be adorned with a top and bottom border and a background color. The background color is already there because we never overwrote that style, and IE still renders the color as expected. So we go back to our blockquote declaration and add a border style that IE can read. Nota Bene: I've only written two declarations because I immediately overwrite the border-width with the second declaration.

blockquote {
border: 3px double #666;
border-width: 3px 0;
}

Finally, because our modern browsers also understand the border and renders it over our nice imagery, we add another declaration using the child selector to tell modern browsers to not render the border: Again, IE will ignore this rule because it doesn't understand the selector.

body > blockquote {
border-width: 0;
}

Voila! Now we have some pretty snazzy pull-quotes that use proper, semantic mark-up and are styled well in CSS to look good in all browsing environments. I've crafted a sample page using multiple background images that degrade gracefully. I've left the CSS in the head of the document with plenty of white space so you can see how it works. Also note that this layout will work no matter how much or how little content is in the pull-quote. You can shrink and enlarge the text to see it accommodate different sized content.

under:

Web Development

Posted on

2005-09-06