Transparent PNG background turns into a Gradient in IE8 – Fixed
While cross checking between Firefox and IE8 I came across an odd bug on a site I was working on. Whenever I tried to apply Internet Explorers gimped css opacity settings to a block level element that was wrapped by another div with a Alpha Transparent PNG background, the container background would gradient/fadeout from left to right, rather than displaying the alpha transparent png in it’s normal state. For example:
PNG Trasparency shows correctly in Firefox
Alpha Transparent PNG shows as Gradient in IE8
I spent around two hours in Google trying to figure it out, trying every combination of opacity filters and old png hacks I could find. Setting Zoom: 1, Z-index, and a couple other hacks that other people seemed to have luck with. In the end, when re-saving my original png background to one with a darker alpha-transparency in hopes of having better luck figuring out what was going on, I stumbled across a solution that ended up working perfect for me.
The problem was my original png was 1×1, and for whatever reason IE8 was not liking trying to tile that and handle the alpha transparency at the same time. When I accidentally saved that image with a much larger copy I had on my clipboard, 100×100, it ended up fixing whatever problem Internet Explorer was having with processing the png’s transparency.
PNG Alpha-Transparency fixed in IE8
Problem: IE8 is turning my transparent PNG background into a gradient
Solution: Increase the image dimensions to a large size, ie: 100×100