Web Systems Design and Online Consumer Behavior [Electronic resources] نسخه متنی

Revolution!: Applying images with CSS

David Hellsing, Designer

www.csszengarden.com/102

[View full size image]

IMAGERY IS IMPORTANT for conveying mood, setting a tone, and drawing the eye. Proper methods of applying imagery are just as critical.

Like the first crack of gunfire across a tense, silent battlefield, a dominant lead image screams out for your attention. Recognizing the power of a strong introductory illustration, David Hellsing turned to old political propaganda posters and gritty image sources such as previously-soaked paper to convey the right tone. Blood and paint, dirt and starsthe makings of Revolution! virtually guaranteed a poignant and powerful result.

Balance was key; keeping his design just this side of warlike and political, Hellsing contrasted the force of the header with a calmer, airy content area. Using Adobe Illustrator to construct objects and type, he combined the elements in Adobe Photoshop for the final, energetic result.

Practical Application

When designing with CSS, well-crafted imagery like Hellsing's header must somehow be applied to the design. For a designer accustomed to using the img tag, viewing the Zen Garden source code is disconcerting because there's no obvious mechanism pulling in the images that must be displayed. Of course the work is being done in the CSS file, but how is it happening?

There are a few ways to apply an image to an element within CSS, but only one is supported well enough to be usable: background images. Applying a background image to something like the Zen Garden's h1 (FIGURE 1) requires a fairly simple syntax: You need only define the path to the image, its position, and how it repeats (if it does at all):

h1 {
background: url(path/to/image.gif) left top no-repeat;
}

If no-repeat is applied, it's likely that the background image will require a containing element of precise dimensions so that it doesn't get cut off. If width or height is not specified, unless the image is very small, it's possible that the text won't be tall enough to contain the whole background, and it will be cropped short of the end of the image (FIGURE 2). In most cases it's necessary to state dimensions on the original element to ensure enough space for the background image:

h1 {
background: url(image.gif) top left no-repeat;
width: 400px;
height: 20px;
}

Tip

Note that ordering within background values is significant; background positioning, for example, requires that the horizontal position comes before the vertical position, hence left comes before top. When using keywords like top and left this isn't strictly enforced, when using units of measurement like % and px it is.

Image Replacement

Leaving the normal text within the element, sitting on top of the background image is not always what's wanted. Many of the Zen Garden designs replace elements like the various headers and hide the text.

In March 2003, Douglas Bowman published a technique on his site, Stopdesign (www.stopdesign.com/articles/replace_text), that allowed replacing a piece of text with a background image for the sake of nicer typography. The technique was later dubbed Fahrner Image Replacement (FIR) in honor of the first person to propose the technique, Todd Fahrner. The basic idea is simple: Surround the text with a span element, hide the text using the span tags somehow, and apply the background image to the element itself. Here is simple markup for this:

<h1 id="pageHeader"><span>css Zen Garden</span></h1>

Image substitution is then easily accomplished using the following CSS:

#pageHeader {
background: url(lemonfresh.gif) top left no-repeat;
width: 400px;
height: 20px;
}
#pageHeader span {
display: none;
}

Any span within the #pageHeader element is completely hidden from the browser using display: none or visibility: hidden; Hellsing has used boththey each give a similar result. This technique is powerful and popular; without it the Zen Garden very well may not have been possible. Image replacement is a fundamental technique for maximum CSS design flexibility.

NoteYou can also apply an image using generated content, which allows you to replace the contents of an element with your own custom content through the CSS:

h1 {
content: url("aldente.gif");
}

First introduced as a way of manipulating the: before and: after pseudo-elements in CSS2, it has been developed into a far more comprehensive property in CSS3. However, browsers are only just starting to implement support so we wouldn't recommend use of generated content beyond anything but experimentation for the time being.

NoteA screen reader is a device that sits on top of the rendering engine of a major browser, such as Internet Explorer, so any text not rendered by the browser was not read to the user.

Responsible Replacement

The goal of the original FIR technique, which used display: none, was not only to replace text, but to do so responsibly. The text within an image isn't machinereadable without a little help. If it weren't for alt text, the HTML img element, for example, would have been largely useless to search engines like Google and alternative browsing devices incapable of rendering images (for example, screen readers that audibly read back the contents of a computer screen). FIR applies over top of backup text already within the HTML document, so everything should have worked out.

NoteA screen reader is a device that sits on top of the rendering engine of a major browser, such as Internet Explorer, so any text not rendered by the browser was not read to the user.

But there was a problem. Google could read the hidden text, but some screen readers couldn't. FIR was designed to provide the extra text that a visually impaired user required for equal access to the content of an image, but it simply didn't work in some cases. Also, if a user had turned off images but left CSS enabled, the browser wouldn't display anything. And then there's the bloated weight of the extra span, which is far less a problem, but still not ideal.

Better Techniques

So as FIR became popular, these implementation issues jumped to the forefront. Could designers use a technique in good conscience that cut off access to the content of certain elements for a portion of the people and software that need them? Fortunately, around the same time, investigations into alternate image-replacement techniques started bearing fruit. Many solved some of the more fundamental problems while leaving one or two outstanding issues. Some involved heavy CSS workarounds and hacking to get reliable cross-browser results. At the time of this writing, there is still no perfect replacement technique; there are only trade-offs and choices among a few of the better alternatives.

NoteOpinion pieces were written (such as Dave Shea's "In Defense of Fahrner Image Replacement"; www.digital-web.com/articles/in_defense_of_fahrner_image_replacement), and studies were done (see Joe Clark's "Facts and Opinion About Fahrner Image Replacement"; www.alistapart.com/articles/fir). It became evident that FIR, in its original form, was unworkablea fundamental technique that advanced the state of CSS had proved unusable. Now what?

Developers Leahy/Langridge

Seamus Leahy and Stuart Langridge independently discovered this method that allows one to drop the superfluous span and visually hide the text without breaking screen-reader accessibility. Unfortunately, because of the broken box model, versions of Internet Explorer for Windows before 6.0, a few browserspecific workarounds are necessary for compatibility with these browsers.

NoteA page keeping track of the image replacement variations is available on author Dave Shea's personal Web site (www.mezzoblue.com/tests/revised-image-replacement).

Markup

<h3 id="header">I like cola.</h3>

CSS

#header {
padding: 25px 0 0 0;
overflow: hidden;
background-image: url(cola.gif);
background-repeat: no-repeat;
height: 0px !important;
height /**/:25px;
}

Pros: Screen reader accessible; no extra span.

Cons: Doesn't solve the CSS on-images off accessibility problem. Requires hacks.

Browser support: WindowsInternet Explorer 5.0+, Netscape 7, Opera 6+, Firefox. MacintoshInternet Explorer 5.2, Safari, Firefox.

Rundle

Designer Mike Rundle proposed a solution using a negative text-indent value to push the text off the screen to the left. It's simple and elegant, although in certain scenarios difficult to use because Internet Explorer for Windows 5.0 also pushes the background image offscreen with the text.

Markup

<h3 id="header">Apple pie with cheddar?!</h3>

CSS

#header {
text-indent: -5000px;
background: url(sample-image.gif) no-repeat;
height: 25px;
}

Pros: Screen reader accessible; no extra span. Nice, light CSS.

Cons: Doesn't solve the CSS on-images off accessibility problem. Doesn't always work properly in Internet Explorer 5.0 for Windows.

Browser support: WindowsInternet Explorer 5.5+, Netscape 7, Opera 6+, Firefox. MacintoshInternet Explorer 5.2, Safari, Firefox.

Levin

Levin Alexander came up with a compelling idea: Instead of leaving the text within the span, move it just outside and leave both within the parent element, then use the now-empty span to cover up the text. If this is done right, the text is accessible to screen readers, and the obscure CSS on-images off scenario is also accounted for. A new problem is that the image must not be transparent; otherwise, bits of the text poke through from underneath. And the CSS is a sight to behold, but not in a good way.

Markup

<h3 class="replace" id="myh1">And a dash of Thyme.<span></span></h1>

CSS

.replace {
position: relative;
margin: 0px; padding: 0px;
/* hide overflow:hidden from IE5/Mac \*/
overflow: hidden;
/* */
}
.replace span {
display: block;
position: absolute;
top: 0px;
left: 0px;
z-index: 1; /*for Opera 5 and 6*/
}
#myh1, #myh1 span {
height: 25px;
width: 300px;
background-image: url(thyme.png);
}

Pros: Screen-reader accessible. No extra span. CSS on-images off problem resolved.

Cons: Transparent images should be avoided. Bulky CSS.

Browser support: WindowsInternet Explorer 5+, Netscape 7, Opera 6+, Firefox. MacintoshInternet Explorer 5.2, Safari, Firefox.

Choices

Which method should you use? The choice is yours. Until the day when a large percentage of browsers support the advanced generated content method mentioned earlier, Leahy/Langridge, Rundle, or Levin is your best bet. Existing Zen Garden designs like Hellsing's Revolution! would not have been possible without the progress that FIR originally offered; future Zen Garden designs will move the concept forward with more accessible, responsible alternatives.