More Eric Meyer

on CSS

Voices That Matter™

Positioning in the Background

Project 4

preview image 1 preview image 2 preview image 3
Project files
Project 4 ZIP file Project 4 Gzip file Project 4 StuffIt file

IT'S A COMMON THING, at least in print design, to use shaded variations of a background to make portions of the design stand out. A good example is an ad in which there's a big picture of a mountain or beach or beautiful woman filling the entire ad, and in the middle is some compelling yet meaningless text, and surrounding that text is a region where the picture in the background has been washed out, as if the text were written on a halfopaque block of plastic.

Since opacity styles aren't part of CSS as of this writing, it's been generally thought that such effects are effectively impossible. There are fixed-attachment backgrounds (see Project 11 in Eric Meyer on CSS for more details), but they aren't supported by Explorer for Windows. One can use semi-opaque PNG graphics, but they aren't supported by Explorer for Windows. In fact, there's only one way to get a smooth translucency effect in Explorer for Windows, and that's by manipulating the position of background images.


There are no known errata for this project.