For CSS background-images
.yourselector {
width:200px;
height:100px;
background: url(/folder/yourimage.png) no-repeat;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
}Cannot be used with repeating, needs fixed with and height.
For inline HTML images
img, .png {
position: relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}This requires a 1x1px transparent GIF image
great piece of code. remembered my bookmark i set a few days ago…. now i need this piece of code for a project. thank you!
validator??
The hacks are not valid CSS, but since the hacks are only needed for IE<7 you can use conditional comments, so the validator and browsers with PNG alpha transparency support don't see the hacks.
You can do this by putting the IE PNG Fix hacks in a separate stylesheet (or in a CSS together with other hacks for IE<7) and then link to it in your HTML like this:
IE<7 will see iepngfix.css and fix your PNG's, while all others (including validators) see it as HTML comment and don't read it, so your page validates fine.
The AlphaImageLoader hacks are invalid CSS, but since these hacks are only for IE 5.5 and IE 6 you can use conditional comments, so the validator and browsers with PNG alpha transparency support don’t see the hacks.
You can do this by putting the IE PNG Fix hacks in a separate stylesheet (or in a stylesheet together with other hacks for IE 5.5 and IE 6) and then link to it in your HTML like this:
<!--[if lt IE 7]>
IE 5.5 and IE 6 will see iepngfix.css and fix your PNG’s, IE 5.0 skips it because it doesn’t know what AlphaImageLoader is, while all other browsers and all validators see it as HTML comment and don’t read what’s inside, so your page will validate fine.<link rel="stylesheet" type="text/css" media="screen, projection" href="iepngfix.css">
<![endif]-->
Im getting an overlay container over my images … which indicates a missing image, over the png images that i ve inserted. The transparency of the png is getting removed anyways. But this overlay is creating an issue
Then this.src = “images/transparent.gif” can’t be found.
For inline HTML images “images/transparent.gif” needs to be a 1×1px transparent GIF image. Then the image overlay becomes invisible, which solves your problem.
I had another problem with this: with PNG backgrounds links who were originally on top of the PNG background image get behind it after applying this hack (because the overlay of the hack gets on top of the links).
I solved this by adding an extra (IE<7 only) empty DIV (class="header-ie") before the original DIV with the PNG background and the links (class="header"), which I gave the same width and height as the original DIV. Then I set the background of the original DIV to none for IE<7 and applied the above filter hack to the extra IE<7 only DIV and positioned it absolute and the original DIV relative, so the original DIV with the links got on top of the IE<7 only DIV with the PNG filtered background.
Then finally the links were clickable again, while PNG transparency also worked in IE<7.
This resulted in the following CSS:
.header-ie,.header {
_width: 800px;
_height: 30px;
_background: none;
}
.header-ie {
_position: absolute;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/header.png',sizingMethod='crop');
}
.header {
_position: relative;
}
Looked into using this technique recently and when used in conjunction with gzip the browser fails to load the page.
I use DD_belatedPNG script for my site! It works great for me. That script support repeated backgrounds as well inline images. And by the way that solution included in wordpres plugin called HITS- IE6 PNGFix
I 100% agree with Pavel, DD_belatedPNG is EVEN BETTER than this option here!
Reasons:
– Works perfectly for IE 5.5 AND 6.
– You do not need to create extra files like a 1×1 image (not that’s a real problem, though. But it’s still a plus to consider)
– You CAN use it for repeated background. I use it for a pattern of dots on top of a image, and it works perfectly.
– Doesn’t generate any extra loading time for your website. At least on the tests i’ve made so far.
– All you need to do is call the JS file by the script tag:
And then you call the function by defining the NAME of a class you want to use as “fixer”, like this:
DD_belatedPNG.fix(‘.pngfix’);
Then let’s say you have a div here with a png image as background:
So, you make it like this:
And you’re done! the script does the rest.
I know i sound like a salesman, but opensource life-savers scripts deserve their importance as it made my job way easier. I think this should be added as a hint here.
This does not work with image resizing which is sad.
this solution works for me, but only on non-interactive placement of images.
to wit, image-replacement roll-over links work fine, but I’ve been unable to have the :hover image show
thank’s again for keeping this page alive chris, as it’s still one of my ‘worn’ bookmarks.
this solution works for me, but what if , when we use that png image as a background, in this case whats the solution????
New to much of this. Using that script, “yourimage.png” is the good png image as PNG 32, PNG 24 or PNG 8? Exactly what image do I use there? I know the .selector to use according to where the PNG is located.
Additionally, do I do this for every image?
this code is very useful for me to fix png images background in ie6 browser, thanks for the solution
Hi santosh,can you please help me by providing the procedure to use this script for css backgroung images.For me it is working for html elements.Am facing problem in fixing for css background images,Thanks in advance!
What about not extra class and css-styling.
Just converting the 24-bit pngs to 8-bit pngs with alpha transparency for IE6 too .
A neat Tool for that is ImageAlpha a GUI for pngnq and pngquant (that does the magic).
The free app can be found here:
http://pornel.net/imagealpha
(only osx)
Thanks for this script as it made me cool when facing problem with ie6.but when i tried this script for css background images it doesn’t work properly.No change has happened.Can you please help regarding this which will make my things easier,thanks once again in advance
this code is very useful for me to fix png images background in ie6 browser, Thank you very much :)
If you give any real time example using this code then for newbies its pretty usefull.
thanks
hamza khan
i don’t know why, but it doesn’t work for me.
i’m using the png as a background but it doesn’t work.
clever…clever…clever! Thanks!
Applying this style to a div that contains an input box or textarea makes it so that you cant click inside and enter text. I thought I could fix it with z-index but no such luck. Its either an ugly input form or a useless input form!
CSS background image example works great.
If it’s not working for anyone:
The path to the image cannot be relative. Example: if it starts with “../” as many CSS background image URLs do it will not work. Ensure yours starts with “/”.
Sorry Guys, Nothing works. plain flop show. Believe me if I’m HEAVILY ARMED, I would go and kill every single developer at Microsoft Campus WORLDWIDE!!! :-(
i use this code in my css but not working for me though i am using in ul and it has position:absolute property on it.
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/folder/yourimage.png’,sizingMethod=’crop’);
any suggestion really helpful
Well, I can’t find any of the tricks found online for IE to help me. The IE doesn’t show the image of my page properly, actually it show them all over the place, but not fixed unto the margin as supposed to. Any help please.
thanx…. it worked !!!
all of you are smart… IE is stupid… windows is more stupid that cannot see this problem
excellent . It works for me