Working with Background PNGs and Internet Explorer 6

PNGs are a fantastic way to extend certain limitations of other image formats. Alpha transparency becomes a major asset in many circumstances, and will continue to be further adapted as time goes on. There was an article published to A List Apart quite some time ago which outlined a possibility of using PNG images as backgrounds to help alleviate some tediousness while creating background images.

This article, like many from A List Apart, really stuck in my mind as something quite innovative and useful; I just needed the right time to apply the technique. Super-Easy Blendy Backgrounds was published November 13, 2006 and I hadn’t come across a project to really make use of the technique until a few months ago. As the project was just coming together, Super-Easy Blendy Backgrounds instantly came to mind as a major time-saver for this particular client project.

Instantly, I was terrified of making things work in IE6. While you can use the AlphaImageLoader Filter, I know there would be some major issues as the project carried into development. There were.

Things to keep in mind with PNG background images and IE6

While the article published to A List Apart was extremely comprehensive and detailed, I went about things a bit differently. Super-Easy Blendy Backgrounds used inline images to achieve the desired effect, and I wanted to use background images. The effect was masterful everywhere except IE6, which is where the work began.

There were two major problems I encountered very quickly when working with PNG background images and IE6. The first problem I discovered was huge. When using AlphaImageLoader, links will not behave as expected in IE6. You’re stuck with a link that does absolutely nothing. I ran across multiple articles regarding this issue, many with varying circumstances and solutions for the bug. The solution that worked indicated the bug can be alleviated by ensuring the element using AlphaImageLoader has no position set and the anchor within said element does have a position. There were other solutions offered elsewhere, some indicating that the bug is triggered by the actual dimensions of the image you’re using as a background, but that didn’t help me as the images I were using were quite unique. It’s important to be aware that this may not always solve your problem. There may be times where you’ll simply need to find an alternative solution to this major problem with IE6.

The second major problem I came across was trying to tile background images for elements. Using AlphaImageLoader this simply isn’t possible. You’re forced to either crop or scale the background image. Using background-position or background-repeat is not an option. This forced me to use larger images in certain places, as well as use GIFs in other areas. You are able to set the sizingMethod to crop, but that may not be entirely useful.

How did things work out?

I’m quite pleased with how this project is turning out. Using PNGs effectively throughout the design will help this particular client adapt a single design by creating many color combinations by changing a couple variables on their back end. While the IE6 version of the design isn’t nearly as attractive as when it’s rendered using a fully capable browser, it degrades quite nicely and many of the features remain in tact.

The important thing to keep in mind when using techniques not fully supported cross-browser is to thoroughly test; especially for client work. How have your experiences been with using PNG?