Page style:

A Blue Perspective: .PNG alpha transparency hack limitations

.PNG alpha transparency hack limitations
18 June 2004

After reading about the hype for a while, I decided that I might have a go at implementing the Web designer's dream – a page with transparent interface widgets.

If you have a look at some pages with drop shadows and textures (even this site) there's a little cheat they employ to make sure the shadow of the body looks like it's falling on the background texture – the body stretches the entire height of the page, cutting off the left and right gutters on either side of the page. This means that the left and right sides of the background can be aligned differently from each other – to ensure the shadow "falls" on the right part of the background – but the background tiling still looks fine because you can't compare the two gutters side by side.

Why do this? Because:

  1. To simulate the shadows actually falling on the textures that requires variable transparency.
  2. The only currently supported Web graphic file format that supports variable transparency (alpha) is PNG.
  3. Internet Explorer doesn't natively display PNG files with their alpha channels enabled.
  4. You don't want your pages to look like crap in IE.

There is, however, a hack for getting IE 5+ to display PNGs with alpha. I wanted to create a page with a body that didn't span the entire height of the page, so I thought I'd try the IE hack.

The hack relies on a proprietary filter property which only Internet Explorer recognises, and can be enabled by javascript, but if I was using it for web page design elements, I'd rather stick it in the css using the "* html" hack (for IE only):

#element
{
background-image: url(image.png);
}

* html #element
{
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="shadow_top_left.png", sizingMethod="crop");
}

Only problem is, the AlphaImageLoader filter isn't really a background property, it just displays an image behind the text. So it doesn't tile and you can't position the image with respect to the element's edges. There's a couple of workarounds for different requirements though:

  1. You can make your background picture really freakin' big, so that no matter how wide or high someone's page gets the image will never run out.
  2. If you happen to be using a 1-pixel x 1-pixel background image, you can set the sizingMethod="scale". This will stretch the image so it fills the entire container; which makes anything but a 1px tile look weird. (Note: the default value for sizingMethod is "image" – this means that if your image is bigger than your container the container will stretch to fit the image. The "crop" value means that the container will not expand and the image will be cropped at the element's edges)

If the hack sounds like it will fit your needs, then give it a whirl. Unfortunately, I like to do some crazy $#!+ with my web pages, so I'm off to sign the petition.

Comments

1/7. 18 June 2004 @ 08:44, Alex Taylor wrote:

A better petition demand would be "Please immediately discontinue your product, magically delete all copies of IE in the world and replace them with Firefox. Thank you." ;)

2/7. 18 June 2004 @ 10:55, Sean Foy wrote:

Yes, IE's PNG support is maddening. I'm not aware of any really satisfying answer. However, I have developed a solution for the special case in which: (1) your web site is an ASP.NET web application and (2) you care about standards and don't want to serve non-standard markup to clients other than IE 5.5-6.

PNGHack (http://sean-janus.optionpc.com/me/software/PNGHack/) is a free set of ASP.NET web controls that renders normal img elements for most web clients and this DirectX filter markup for IE versions that support it.

I hope that I've done my small part to promote adherence to Web standars and the use of PNGs rather than GIFs.

3/7. 18 June 2004 @ 21:56, Dean Edwards wrote:

This is a quote from my notes to IE7:
http://dean.edwards.name/IE7/notes/#PNG

"It is important to understand how this solution works when applied as a background image. The solution relies on Microsoft's "filter" property. This provides Explorer with visual effects not normally provided by standard HTML.

To achieve these visual effects Explorer creates a supra layer on the browser window. Now this is all guess-work of course but a noticeable affect is, that if an element has a PNG background, then none of its child elements will receive mouse events. Killing "hovers" and the like."

-dean

4/7. 19 June 2004 @ 01:57, Hans wrote:

"Please immediately discontinue your product, magically delete all copies of IE in the world and replace them with Firefox. Thank you."

While that would work for many of us web-savvy people, many others, who may think that the little blue E _IS_ their computer, it might not work. I'm off to sign the petition.... But I really don't expect Microsoft to care.

5/7. 21 June 2004 @ 13:57, Philippe wrote:

[RE] Dean Edwards

It is sometimes possible to work around that by using a 1px tall or wide png file, depending if you repeat-y or repeat-x. Otherwise links become unclickable, etc.

Bad luck, I needed an image that was at least 8px tall and 100px wide because I wanted a shape... In came the GIF file for IE win...

6/7. 29 June 2004 @ 21:30, Gemini6Ice wrote:

I can't seem to get this hack to work. Everyone still seems to get the "png-support" version, even if they are running IE on windows. -_-

Also, if I remove the browser detection, and I just plug the hack in, image rollovers no longer work.

7/7. 30 June 2004 @ 20:23, Gemini6Ice wrote:

For anyone who cares, I've managed to get the image rollovers + IE PNG hack to work. Look at the code at
http://www.gemini6ice.com/planets.htm

Post your own comments

Fields marked with an asterisk* are mandatory. All HTML tags will be escaped. http:// strings in comments will be auto-linked.