Transparency can add something beautiful to a design. Randa Clay thought so whilst designing her first WordPress theme and I have been considering something very similar for a design that has been going round in my head recently. Randa's problem was that making the background of a <div> transparent so that the page background could be seen through it caused everything within the <div> to be transparent to the same degree, including text and images.

Transparent post level images aren't desirable, so I set about finding out how best to apply the transparency to the <div>. Here are my results:

CSS3 Properties

CSS3 provides us with the opacity property that lets us declare the transparency of an element.

Note: This article uses CSS3 properties and some proprietary browser stuff too. This is unlikely to be valid, but I'll try my best! Most importantly the results will be supported across the major browsers and will be (hopefully) futureproof.

What we like to call modern browsers (Firefox, Opera, Safari) support this opacity property. To make a <div> 50% transparent you can use the following code:

div { opacity:0.5; }

Setting opacity to 1 makes an element entirely opaque and setting it to 0 makes it entirely transparent.

Transparent .pngs

Perhaps using entirely CSS based properties to create the transparency is a bit much, especially since CSS3 is not yet a recommended document. We could always use a transparent .png to provide our background. This is a safe and valid method, but as we all know, Internet Explorer 6 does not support transparent .pngs.

Proprietary Code

IE6 does provide us with some proprietary code to produce the same opacity results as the CSS property. The following code makes a <div> 50% transparent in IE6:

div {
 filter:alpha(opacity=50);
 height:1%;
  }

The height:1%; is used to give the <div> "layout" (thanks to The Strange Zen Of JavaScript).

The benefit of this code is that, unlike the CSS property opacity, setting the child elements of the transparent <div> to be fully opaque does work. You can do this as follows:

div * {
  filter:alpha(opacity=100);
  postion:relative;
 }

Thanks to Ove Klykken.

Many Methods -- None Of Which Work

So opacity doesn't behave exactly as we want it, doesn't work in IE7 and, like transparent .pngs won't work in IE6. IE filters only work in IE. I decided to build together elements that worked the way I wanted them to and that will cover all the important browsers.

To keep the use of proprietary, invalid code to a minimum I decided to use conditional comments to direct the code to IE6 only. IE7 supports transparent .pngs and using this method is both valid and doesn't cause child elements to be transparent too. Mixing them both together produces the following:

div {
  background:transparent url(transparent.png);
  }

and for IE6

<!--[If IE 6]>
<style type="text/css">
#transparent {
 background:#fff none;
 filter:alpha(opacity=50);
 height:1%;
  }

#transparent * {
  filter:alpha(opacity=100);
  position:relative;
  }

</style>
<![endif]-->

The Finished Product

So to use the method, all you need is to create a 1x1 pixel transparent .png which can be tiled and add the code above. Please see a few examples a came up with to demonstrate the different methods and their failings. Example 4 uses the above code and has been tested in IE6 and 7 (it doesn't work in IE5, but who uses that any more?), Firefox 1.5 and 2.0 and Opera 9.2. I have to assume it works in Safari, but I just can't check, let me know if you can.

I hope this helps out, let me know if you find somewhere to use it!