IE 7 PNG Transparency Background Issue

Hi there,

Here’s a screen grab of what my page is supposed to be looking like (thanks Google Chrome, you really are perfect). The gray gradient horizontal bar is the #stats div, with the #welcome div beneath the gray gradient bar.

And here’s what IE 7 is doing to my PNG background in the #stats div. IE 7 seems to be filling the semi-transparent part of my PNG background (landing/bg-stats.png) that’s supposed to be my drop shadow with an all-black fill (I’m not using a CSS drop shadow – the drop shadow is in my PNG background). At first, I thought IE 7 was somehow applying a border-bottom to the #stats div, but it’s not. IE 7 is altering the PNG background image.

		#stats {
			width: 100%;
			height: 60px;
			background: url('./landing/bg-stats.png') repeat-x; [color=red][b]/* IE 7 IS FILLING THE SEMI-TRANSPARENT PART OF THIS PNG WITH BLACK FILL */[/b][/color]
			font: 13px Shanti;
			text-align: center;
			color: #333;
			text-shadow: 1px 1px 1px #d5d5d5;
			filter: dropshadow(color=#d5d5d5, offx=1, offy=1); /* THIS IS FOR [b]TEXT[/b], NOT REFERENCING MY BACKGROUND PROBLEM */

		#welcome-container {
			/* placeholder */
		#welcome {
			width: 960px;
			padding: 30px 0 20px 0;
			margin: 0 auto;
			color: #222; /* #c2c2c2 */
			font: 18px Shanti, sans-serif;
			line-height: 27px;
			background: url('./landing/welcome-arrow.png') no-repeat 457px 315px;

<div id="stats">
	<div class="stats-container">
		<!-- etc... -->

<div id="welcome-container">
	<div id="welcome">
		text here

This seems to be some odd and weird transparency issue with my background. I’ve applied this PNG fix to my page, but it hasn’t fixed my background issue.

Any ideas of why IE 7 is filling the semi-transparent part of my PNG background with black fill? I’m stumped.

IE7 normally handles PNG’s pretty well so you shouldn’t ever need to use a PNG fix, is there a link we can use to see your site as its going to be extremely difficult trying to debug the issue without a physical source to look at.

The page is located at

Let me know what you think… and that’s what I’ve been thinking about IE 7. It normally handles PNGs fine.

I looked at your page in IE9, and the same thing happens. When I disabled the filter drop shadow, the problem went away.

As Jeff said the filter is the cause of the issue, the way I look at a website using CSS3 is that all modern browsers should look pretty with shadows and rounded corners but IE shouldn’t get any special treatment as filters slow down the performance of a browser quite a lot when you run performance tests.

Gotcha! Thanks for bringing this to my attention, guys. Much more simple than I thought the fix would be.