.PNG alpha transparency hack limitations

18 June 2004

7 comments

A Blue Perspective: .PNG alpha transparency hack limitations

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.

Categories

, ,

Comments

  1. 1/7

    Alex Taylor commented on 18 June 2004 @ 08:44

    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. 2/7

    Sean Foy commented on 18 June 2004 @ 10:55

    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. 3/7

    Dean Edwards commented on 18 June 2004 @ 21:56

    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. 4/7

    Hans commented on 19 June 2004 @ 01:57

    "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. 5/7

    Philippe commented on 21 June 2004 @ 13:57

    [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. 6/7

    Gemini6Ice commented on 29 June 2004 @ 21:30

    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/7

    Gemini6Ice commented on 30 June 2004 @ 20:23

    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

  8. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed