College Library Media Catalog

Transparency Demonstration

An Example of Transparency Created with only CSS

This page is designed to demonstrate what transparency effects can be created in a modern browser using only CSS.

The transparency effects in this page are achieved using four separate version of the same image. One version is uses as the overall background of the page, one for the background of the center "content" area of the page, one image acts as the background of the links at the left, and the last image version provides the background for the "highlighted" links. The trick is that all four images are "Fixed" in position relative to the viewport. Scrolling the page up or down just reveals different parts of the underlying background image.

Here's an example of the CSS code:

body {
  background: black url("bg-1.jpg") 0 0 no-repeat fixed; }
div#content {
  background: black url("bg-2.jpg") 0 0 no-repeat fixed; }
div#links a{
  background: black url("bg-3.jpg") 0 0 no-repeat fixed; }
div#links a:hover{
  background: black url("bg-4.jpg") 0 0 no-repeat fixed; }

The original version of this effect came from Eric Myers page (which admittedly uses better images than mine).

Return to the HTML Lab Homepage.

updated: 06/21/2007 by Michael Lynch