Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Positioning Web Elements in the Background Using CSS

  • Print
  • + Share This
  • 💬 Discuss
This chapter is from the book

This chapter is from the book

Since opacity styles aren't part of CSS, it's been generally thought that such effects are effectively impossible. But there is a way to get a smooth translucency effect in Explorer for Windows, and Eric Meyer shows you how in this article.

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.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus