INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

CSS Visual Filters

How can I use alpha tranparent PNGs across all browsers? by BabyJeffy
Posted: 5 May 07


Many web developers have shunned the PNG image format in the past. For some this has been because of a perceived lack of support for alpha transparency in Internet Explorer. This FAQ shows how you can use alpha transparency successfully across all browsers - and specifically IE 6 for Windows.

This expands on the earlier FAQ215-3207: How to apply visual filters to text with CSS.

The examples below rely on the following CSS code (described below):

CODE --> CSS block

<style type="text/css">
    #demo1 {
        width: 250px;
        height: 100px;
        background: url(images/logo.png) transparent top left no-repeat;
    }
</style>

<!--[if lt IE 7]>
<style type="text/css">
    #demo1 {
        background-image: none;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src=/images/logo.png);
    }
</style>
<![endif]-->
The first block of CSS sets a background image on an element with the id "demo1" (typically a div, span or img) for all browsers. This works fine for everything else, but doesn't work with IE prior to version 7.

The second block targets just these "broken" browsers through use of a conditional comment - more at FAQ215-6625: How can I target specific IE (windows) browsers using just HTML?. This second block uses the filter property to set up a proper alpha transparent version of the png. Read more about this here at the MSDN site.

In the following example the CSS above would show the logo.png with alpha transparency as the background to a div:

CODE

<div id="demo1"></div>

This next example shows that you can display a png with alpha transparency by targetting a transparent image:

CODE

<img src="transparent.gif" id="demo1" alt=""/>

There are plenty of variations of this technique. All the examples above are considered "standards friendly". This final example shows the same CSS simplified (but not passing validation):

CODE --> CSS block

<style type="text/css">
    #demo1 {
        width: 250px;
        height: 100px;
        background: url(images/logo.png) transparent top left no-repeat;
        _background-image: none;
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src=/images/logo.png);
    }
</style>
If you are putting the CSS above into an external stylesheet, then be aware that the path to the logo.png when used as the background image is relative to the CSS file, but the path to logo.png when used in the filter is relative to the enclosing HTML file. This can cause some confusion.

On a related note... you should always ensure your alpha transparent PNGs are 32-bit to ensure that they always display the same colour across all browsers (specifically Firefox and IE displayed a 24-bit alpha transparent PNG differently using the technique described here - changing it to 32-bit confirmed this was the case).

Jeff

Back to HTML, XHTML & CSS FAQ Index
Back to HTML, XHTML & CSS Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close