.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:
- To simulate the shadows actually falling on the textures that requires variable transparency.
- The only currently supported Web graphic file format that supports variable transparency (alpha) is PNG.
- Internet Explorer doesn't natively display PNG files with their alpha channels enabled.
- 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.
* html #element
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:
- 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.
- 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.
Follow me on Twitter
To hear smaller but more regular stuff from me, follow @themaninblue.
- Resolution dependent layout update
- footerStickAlt: A more robust method of positioning a footer
- widgEditor: A simple, standards-compliant WYSIWYG HTML editor
- Accessible, stylish form layout