Basic and Advanced Transparency Tutorial

Once we have layers, we can make pages look more interesting. Layers are always squares or rectangles, with a fixed width and height. However, if we make parts of the layer transparent, we can make them appear like more interesting shapes.

1. Creating a test page

We'll create a test page with an irregular background so that we can test the transparency of our layers. A chequered background is traditionally used, so we'll just create a simple page with a chequered background. On top of the background we'll place a green rectangular layer.


<html>

<head>
    <title>Forms Page</title>
    <style type="text/css">
        body {
            background: url(sitelayout/background.gif);
        }
        .myLayer {
            width: 320;
            height: 240px;
            position: absolute;
            left: 100px;
            top: 100px;
            padding: 10px;
            background: green;
        }
    </style>

</head>
<body>
    <h2>Transparency Test</h2>
    <div class="myLayer">
        Test Layer.
    </div>

</body>
</html>

View Source Run Example

2. Creating a new shape

We'll create a more interesting shape for our layer to be in a painting program. In this case just create a cloud shape out of a few circles on a transparent background.

3. Creating a GIF Image

Save this image as a GIF image, with transparency enabled. Using Paint Shop Pro, the dialog looks like this:

We'll update the stylesheet on our layer to use this new shape instead.

.myLayer {
    width: 400;
    height: 286px;
    position: absolute;
    left: 100px;
    top: 100px;
    padding: 70px;
    padding-left: 20px;
    background: green;
    background: url(sitelayout/shape.gif) no-repeat;
    text-align: center;
}

View Source Run Example

4. Using PNG Instead of GIF

Well - we have made a transparent layer, and it is a more interesting shape. It really doesn't look great though. GIF supports only one transparent colour, so all the parts of the image that are semi-transparent are not transparent at all. The image doesn't blend into the background, it actually looks quite ragged around the edges.

For a long time this was the best that transparency had to offer web designers. Of course there were ways of creating the same effect - you could blend your gif image into the background in a painting program and then save the image with no transparency at all, and position it just right on the screen.

With the advent of a (not especially) new image type, PNG, that is still not widely used, we can use images with perfect alpha level transparency.

Alpha transparency means that each pixel on an image has a transparency value associated with it, and that value can be any one of 256 different values. This allows parts of the image to be transparent, other parts to be semi-transparent, and others to be fully opaque - just what we're looking for!

We'll save our shape as a PNG image this time, and we'll select alpha transparency this time.

Once again, if using Paint Shop Pro, the dialog looks like this:

background: url(sitelayout/shape.png) no-repeat;

View Source Run Example

Load the above example in Mozilla, and you'll notice the layer, all looking correct, and with beautiful transparency!

Unfortunately, for those using Internet Explorer, there is no transparency - rather the whole shape is surrounded by an ugly gray/blue box.

This is because Internet Explorer does not properly support PNG transparency, and this is a principle reason why PNG images are not used as often as they otherwise might be.

[Internet Explorer 7, due to arrive along with Windows Vista in 2007, will supposedly implement PNG transparency properly.]

5. Cheating with CSS to get Transparency

Fortunately, there is a way of getting the current Internet Explorer to do what we want.

We can add some additional CSS to invoke some of Microsoft DirectX image classes to render the PNG image properly.

<!--[if gte ie 5.5000]>
<style>
.myLayer {
    background: none;
    filter: progid:DXImageTransform. 
    Microsoft.AlphaImageLoader(src='sitelayout/shape.png', 
    sizingMethod='crop')
}
</style>
<![endif]-->

View Source Run Example

What the code above does is over-write the myLayer class with a new one. In this class the background is set to none (!), but instead we use a Microsoft Specific filter CSS property.

The filter uses Microsoft's AlphaImageLoader - but all you need to do is put the name of your PNG file in the first argument.

The whole style sheet is hidden in  so Mozilla won't see the stylesheet, and uses (again Microsoft Specific) an if statement to insert the style, only when we're using Internet Explorer.

If you run the example, you'll see that it now runs beautifully on both Mozilla and Internet Explorer.

There are many applications for this. You can add pleasing shadows around your tables or boxes, or you could make your menus transparent in places, or you could use graphics that fade directly onto the page rather than remaining within bounding boxes.

Have a play - see what you can do!

Back to tutorials