c s s _ t r a n s

This page shows you how to use simple CSS to generate transparent text-boxes in your web-pages. There are actually many different variants of this, but I hope that mine is a bit easier to understand than most.

How this works

The basic idea is to take two images, each of the same size and with the same basic content. One image should be significantly brighter than the other (or, at least, they should be of a different contrast or hue). The dimmed image is used to form the background of the text box, whereas the original (undimmed) image makes the background of the rest of the page.

Note this method is very different from the table-background method that is so commonly in use on the World Wide Web- not only does it produce much cleaner HTML, it is also standards compliant, and thus will work on any compliant web-browser.

To accomplish this, we first set the style for the BODY tag thusly:

BODY {
    background: black url(background.jpg) 0 0 no-repeat fixed;
}

Here we set the background to "black", the background image to background.jpg (our undimmed, original image). We also tell the browser not to repeat the image, and set it at a fixed position.

Next, we want to set up a div for the content-box of our page:

div#content {
    background: #545454 url(background-dim.jpg) 0 0 no-repeat fixed;
}

Similar to the BODY {background:..} property settings, here we assign a background color (#545454 is a grey) and a background image to background-dim.jpg (our dimmed image). Again, we tell the browser not to repeat the image and to set it at a fixed position. This is all you must to to make a transparent box.

Additionally, we do set some other properties for this content-box, but they are not essential for making the box transparent. Basically, we set position attributes for this box, as well as assigning it a border:

div#content {
    position: absolute;
    top: 80px; left: 30px; right: 30px;
    padding: 15px 10px 5px;
    border: solid #212121;
}

What else can I do with this?

Quite a bit actually! First of all, you can actually use this technique to simulate windows in your document (see window.html for more information). Plus, Eric Meyer has some great CSS demos to give you other ideas for fun and neat things you can do with CSS.

Other than that... Get yourself a good XML/XHTML/CSS book (my personal favorite is "XML: A Primer" by Simon St. Laurent) and go nutz!

What is this crazy image you have in the background?

Some nutty thing I found in the Copyright-Free NASA Image archive. Take a look at Gimp-Savvy for more information on other Copyright-Free images.