SalientPoint

Prior to CSS3 there was no way to stretch a background image, which means that as of this writing there is no way (that we know of) of doing this in a reasonably browser-compatible manner. For modern browsers the solution is to use and size an tag. However, pre-IE7 Internet Explorer browsers don’t support alpha transparency.

The work-around: the AlphaImageLoader filter, can only be applied to background images an not to tags. Curiously however, the AlphaImageLoader does support transparency through a parameter. This fact proved crucial in our solution.

So what to do if you need to use alpha-blended, stretched PNG images across common browsers (including IE 6)? We came up with a solution where we conditionally generate special markup for IE taking advantage of the ability to specify transparency of the image loaded using AlphaImageLoader, and the fact that it can be made to stretch with the surrounding element.

Thus we end up with:

For IE 6 and older:

Style:

.stretchedPngIE {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = '/path/to/our/stretched.png', sizingMethod = 'scale' );
  background-image: url(transparent_1x1.gif);
}

Markup:

<div class="stretchedPngIE" style="height:42px; width:42px;">

For other browsers:

<img src="/path/to/our/stretched.png"  style="height:42px; width:42px;"/>

There are hopefully less painful ways of doing this? If you know of a better way (aside from the obvious alert("Upgrade your browser!") please post comment or link.