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

Home > Articles > Web Design & Development > CSS

Positioning Web Elements in the Background Using CSS

  • Print
  • + Share This
  • 💬 Discuss
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.
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.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus