February 11th, 2008

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?

 Comments

13 Comments

  1. Dan February 11th, 2008

    For certain effects like drop shadows, I use this method which technically doesn’t work in IE6 but it degrades much more gracefully than the flat gray area produced by PNG24 and PNG32.

    http://www.sitepoint.com/blogs.....ar-winner/

    I’m not sure how it would work for an image that has no completely opaque pixels… I guess it just wouldn’t show up at all. But depending on your design I guess that could work as well as long as it still looks OK in IE6.

  2. Jonathan Christopher February 11th, 2008


    Author

    @Dan: Great tip! Thanks very much for leaving the link. I wasn’t aware of this passive graceful degradation but it does indeed to have a benefit when working with PNGs.

  3. JR Tashjian February 11th, 2008

    It’s funny that you post about this issue, as I have just recently ran into this issue for a client’s website. they wanted rounded corners on their site, which is very simple except for the fact they wanted a gradient background. It would have been much easier with a solid background but thats not what they wanted.

    The way I went about fixing this (until I try some of these techniques) was just removing the rounded corners images from IE6 and earlier. I know it isn’t the right way, but it was quick for now.

    you can view what I did here: http://bfcglenville.com

    I will be sure to try these techniques above.

  4. Ionut February 11th, 2008

    It seems that i didn’t quite get it. Did you not implement the visual effects in ie6 going for graceful degradation?

  5. Fredrik Wärnsberg February 11th, 2008

    My experience with PNGs and IE6 is that you’re fine as long as links aren’t involved. When it comes to links the solution you proposed often isn’t feasible and you need to use other methods for working around it. I often resort to using PNGs for compatible browsers and a GIFs for IE when it’s possible.

    24ways published a good article on this during advent:
    http://24ways.org/2007/supersl.....png-in-ie6

    A short summary of the article:
    When using links and a PNG-background you’re often screwed. Don’t overuse PNGs since it will slow down rendering speeds enormously.

  6. Fredrik Wärnsberg February 11th, 2008

    Oh, I forgot to mention:
    Were you able to get the background to resize using sizingMethod ’scale’ instead of ‘crop’?

  7. Jonathan Christopher February 11th, 2008


    Author

    @JR Tashjian: Removing some of the aesthetics a PNG can provide is often the only solution you’re able to make work in IE6. There are a few limited ways around the issue, but more often than not you’ll need to prepare for an uphill battle.

    @Ionut: There were certain aspects of the design where I was able to retain the use of PNG images to achieve alpha transparency, but as many articles outline, once anchors come into play, you’re most likely better off using something else.

    @Fredrik Wärnsberg: I’ve adopted a similar deduction as you; make things look smashing in capable browsers, and degrade for IE6 through the use of GIFs.

    Following, yes, using scale for the sizingMethod was sometimes applicable, but there were certain times where it simply wouldn’t work. For example: diagonal lines created in a PNG. Normally you’re able to use a fairly small image and tile it, but neither scale or crop can help you there.

  8. Raya February 12th, 2008

    I had problems with PNG transparent background yesterday. I decided my problems with AlphaImageLoader Filter this time. And yes, <a> tags became of not working state.

    Below code fixed this:
    a {
    position: relative;
    z-index: 1;
    }

    I was thinking also how huge problem Microsoft created with delivering IE6 to web developers life :)

  9. Adam February 12th, 2008

    I’ve been using png24s a lot recently, and dedestruct has a few good solutions. I’ve had the best luck with the first one he mentions. I tried supersleight too, but I think it didn’t play nicely with jquery if I remember correctly. Anyway, you’re absolutely correct that it’s really just a matter of getting something acceptable in IE6, and testing it over and over.

  10. Kevin Quillen February 12th, 2008

    This is almost not even worth the work trying to get IE6 to play nice with PNGs. Doing a CSS background using a PNG (that has transparency) is very difficult to pull off correctly.

    In such case- upgrade to IE7 or use gifs in a IE6 stylesheet to save yourself some sanity.

    Our day with PNGs and no hacks will arrive, just a little while longer.

  11. Dimo February 13th, 2008

    Another issue with IE6 that I recently discovered is that a container with an alpha filter applied to it makes all absolutely positioned elements inside it unselectable.

    However, there is no problem to place the inner content in a sibling of the container with the PNG background and to position one on top of the other and everything works again :)

  12. Piotr Petrus February 14th, 2008

    You can emulate background-repeat: repeat-x/y on PNG24 in IE6:
    http://art.webesteem.pl/17/wst.....mple_1.php

  13. Jonathan Christopher February 18th, 2008


    Author

    First and foremost, my apologies for this delay in following up!

    @Raya: Yes, sometimes you’re able to position the anchor relatively in an un-positioned parent element, but unfortunately it sometimes just doesn’t work. It is a difficult situation to find yourself in, and I’d recommend the use of a GIF in that case. Hopefully it’s a case where alpha-transparency can be left out when it comes to IE6.

    @Adam: Thank you for the link. Yes, testing is huge as always. There are many times where I’ve simply abandoned a PNG in favor of a GIF for IE6 in order to retain at least a shred of stability with the overall design.

    @Kevin Quillen: You’re indeed correct. There are some times, however, where actually using a PNG can enhance the design for IE6 just a bit which can be a big sale to a client. I too am looking forward to a restriction-free use of PNGs in design.

    @Dimo: Thanks for the tip!

    @Piotr Petrus: Thanks very much for the link; I’ll be sure to give it a read as soon as possible.