Using the Transparent PNG as a Background Image

May 13, 2004

Like so many others out there, I wish I could use those transparent PNG images in all of my projects without having to worry about Internet Explorer users. So when I went to redesign my site I looked at my stats and found that a large percentage of the visitors used mozilla or safari, so I said, “I shall use the PNG.” As you know, when you do use a transparent PNG and someone with IE views your page, the results are not pretty. There is a way around it.

Replacing the PNG with the GIF

There are a couple transparent PNG images I use on my site, the main background and the selected tab background. However, what the IE user sees are GIFs instead, main background and tab background. The technique is really pretty simple.

#main {
background: url(../i/mainbg.png) repeat-y »
 top left !important; /*Mozilla will apply this one*/
background: url(../i/a-mainbgie.gif) repeat-y top »
 left;	/*IE will apply this one*/
	}

Yes, it does use a hack to trick IE inro ignoring the PNG, but I figure once IE fixes this bug (probably 2006) they will support transparent PNGs. It does require some extra work and I suggest it only be used when you really have the need for a transparent PNG.

Comments

Malarkey said:

A lovely site design! And nice to see it in the Vault Blake.

Posted on May. 18, 2004 12:09 #

Phil Baines said:

It's good to see someone else that wants to promote the use of PNGs.

Nice site. You have been vaulted!

Posted on May. 19, 2004 04:08 #

Dan Sandler said:

A little bit of JavaScript can trick MSIE into correctly rendering a 32-bit PNG used as a background image. Take a look at this background PNG enabler, a riff on the original sleight.js script for PNGs in <img>. (I eventually just rolled the two together into a combo PNG enabler script that will work for regular or background PNGs.) Let those alpha channels fly!

Posted on May. 19, 2004 22:41 #

Blake Scarbrough said:

Thanks for the script. I will have to give it a try. I will let you know if it works for me.

Posted on May. 20, 2004 12:43 #

mixin visuals said:

sweet info blake. p.s. awesome redizzle!

glad to know some javascript can trick ie to make png's show.

i bet microsoft will enable png's in ie the day after they purchase macromedia...

Posted on May. 21, 2004 00:44 #

Paul D said:

Thanks for the tip, Blake. I prefer not to use Javascript in my web design just to make things prettier for IE, so this is useful. It's been added to my CSS bookmarks!

Posted on May. 29, 2004 14:19 #

Mark Wyner said:

2006? I'll put my money on MS not supporting PNGs until 2016, at least. :)

You folks should check out an excellent ALA article on implementing PNGs. I found it rather complex at first, but once you get it, you can use it pretty easily.

http://www.alistapart.com/articles/pngopacity/

Posted on Jun. 9, 2004 15:52 #

TwisterMc said:

I'm so happy i found this site!! I don't understand how this works but it does!!!!!!!

Posted on Jun. 10, 2004 13:53 #

stylo~ said:

Be aware that AlphaImageLoader makes all child element links unclickable, so you can't use it on a div background that contains a link. (Any MS ActiveX surface effect does that.)

Posted on Jul. 27, 2004 04:06 #

Matt Brett said:

Very nice little 'hack' here. Thanks so much! I found another one that worked mint for image tags, but about half of my site layout uses PNGs for background images, so I still had huge problems. This fixed those background images though. Nice!

Stupid M$.

Posted on Aug. 7, 2004 20:20 #

Twink said:

Interesting information on this blog, thanks

Posted on Sep. 22, 2004 19:50 #