IE7 .PNG background-image

Having finally gotten fed up enough of having to mis-use <acronym> where the semantics strictly demand <abbr>, so that the majority browser will actually recognise a similar tag to the one intended, I installed IE7 on my main site (uploads of affected pages to happen in due course).

The one thing I discovered that was not obvious from the docs was that if you use a .png as background imagery, it will be stretched to fit the containing block, regardless of repeat setting. This turns out to be a consequence of the repackaging as an IE filter (so as to handle alpha transparency), which appears to lose any information about the underlying image.

The work-round is to look in the samples sub-directory at how to set up the xml config file to change the the file ending needed to trigger the png-to-filter transform from ".png" to e.g. "-alpha.png"; in this way:

1. in the /IE7/ie7-html.htc, add the line <xml id="settings" src="/IE7/modules/ie7-config.xml"></xml> (I'm not sure how position dependent the file is - I added it immediately before the ie7-debug.js line)
2. take the /IE7/samples/ie7-config.xml, and edit the value=".png" to taste, e.g. value="-alpha.png"
3. install the ie7-config.xml file to /IE7/modules/ie7-config.xml
4. Enjoy!

.PNG files that use simple binary transparency e.g. the ones you converted from transparent .gifs before the Unisys patent finally expired world-wide a couple of weeks ago, will display with that transparency just as they did in IE anyway. And for alpha blended .PNGs, ensure that they are contained within something that fits exactly.