Positioning Web Elements in the Background Using CSS
- Project Goals
- Preparation
- Style at Dawn
- Beached Styles
- Branching Out
This chapter is from the book
This chapter is from the book
This chapter is from the book
But I was told there would be no math! Too bad.
—Macintosh Technical Note #31
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 half-opaque 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, short of hacking the browser with proprietary behavior scripts, 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.
Project Goals
We've taken on a project in which a local author is publishing some of his short essays and wants them to look artistic. He's a big fan of translucency effects, so he wants to see them used in his designs. Specifically:
The author is supplying the images, so fortunately we don't have to worry about acquiring them. All we really have to do is pull a little sleight of style to get the translucency effects our client has requested.