IE6 Transparent PNG Backgrounds…With Repeat and Positioning?!

It’s brand-spankin’ new and I haven’t tried it myself — so caveat emptor — but Drew Diller has posted a JS widget he calls DD_belatedPNG, which purports to not only get IE6 to display both inline and background transparent PNGs correctly but to actually permit the use of the background-position and background-repeat CSS properties.  The latter is not possible using the MS-proprietary AlphaImageLoader filter, making this capability something of a holy grail for compatibility-conscious web devs.

What the thing does is dynamically grab the PNG it’s told to, then use an MS “behavior” to recreate it as a VML node, and then insert that VML node back into the document, replacing the original PNG.  Unlike AlphaImageLoader, VML honors all of the expected CSS properties.

One drawback is the script has to be explicitly told which element(s) to grab, though at least one can use standard CSS syntax. This makes implementations in, say, a CMS-driven environment more problematic.  But if the thing works reliably and without leaking like a sieve, it could restore a little sanity and flexibility until that glorious day when IE6 is finally staked through the heart and forgotten forever, amen.

2 thoughts on “IE6 Transparent PNG Backgrounds…With Repeat and Positioning?!

  1. Spencer, I’d like to make one clarification. You wrote:

    “Unlike AlphaImageLoader, VML honors all of the expected CSS properties.”

    Sort of. You can give a VML fill sub-element a TYPE attribute: http://msdn.microsoft.com/en-us/library/bb229619(VS.85).aspx

    Setting the TYPE to ’tile’ does what one would hope – tiles the image. By munging that together with a POSITION attribute (0 is like ‘left’, 0.5 is like ‘center’, and 1 is like ‘right’) and style.clip on the parent element gives the visual effect of real background-repeat and background-position (while in reality it is a somewhat involved obfuscation of unwanted graphics).

    Anyway, I put up 0.0.7a as of this morning (New Year’s Day). You can now either call fix( someCssSelector ) or fixPng( someDomElement ), which will lend it self to usage with either from-scratch JS or with a library (jQuery et al). Changes: http://www.dillerdesign.com/experiment/DD_belatedPNG/#release0.0.7a