Cross-browser semi-transparent backgrounds
posted Oct 14, 2011

Semi-transparent backgrounds are nice. They would be more popular, but Internet Explorer doesn't support .png transparency. There are a few clunky workarounds. Here's another that's a little less clunky.

Update: Here is probably the easiest way. You can stop reading this page now.

Update: The kind folks on css-discuss point out some other methods. I believe most of them use javascript.

Update: An article from A List Apart has more techniques (some of which are downright painful to look at...)

Update: Workaround for link bug in IE 6.0

Update: Now works in IE 5.0 (Thanks MG)

Example:
I like flowers.
They smell nice.
How it works:

The ingredients are:

  • A background image: flowers.jpg
  • A small, semi-transparent .png image: 75p_honey.png
    (The "75p" means 75% opaque)
    These are a snap to create with The GIMP.
  • A small css hack to overcome IE's lack of support for semi-transparent .png images:
    .trans_box2 {
      font-family:verdana;
      font-weight:bold;
      padding:40px;
      margin:30px;
      border:solid 1px #555;
      /* Mozilla ignores crazy MS image filters, so it will skip the following */
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/75p_honey.png');
    }
    /* IE ignores styles with [attributes], so it will skip the following. */
    .trans_box2[class] {
      background-image:url(/75p_honey.png);
    }
    
The html:
<div style="float:left;background-image:url(/flowers.jpg);border:solid 1px #000;padding:10px;">
<div class="trans_box1" style="float:left;">
I like flowers.
</div>
<div class="trans_box1" style="float:left;">
They smell nice.
</div>
<div class="trans_box2" style="float:left;">
<a href="http://www.google.com/search?q=flowers+bees+honey"&gt;When combined with bees, they make honey...</a>
</div>

More information Addendum: IE Link bug

Thanks to nitehood for pointing out a bug/problem in IE. Using alphaimagefilter on a div makes links inside the div quit working (they appear as links, but don't respond to mouse clicks or hovering).

Upon further research, this has been noticed before, here and here.

This points toward a possible cause. Apparently, the dimensions of the background image affects IE's display of links. That's a pretty ugly bug.

I tried various widths and heights for the background .png image. The results are in the table below (Y="links work in IE 6.0" N="links don't work in IE 6.0")


width
height
12345678910
1Y
Y
Y
Y






2Y
Y
Y
Y


Y


Y
3Y
N
N
N


N


N
4Y
N








5









6









7Y
N








8







N

9








N
10Y
N






N
N

Based on these results, the background image is now 2x10 pixels. Links now work in IE 6.0.

Comment by Mike D
posted Jun 03, 2007

You are correct Phil, after exhaustive testing in IE 6 the AlphaImageLoader only works on an element via a class, does not work via an ID. Nice work M$

Comment by Junjie
posted Jun 14, 2007

i realised even those widths and heights don't work for me. http://alistapart.com/d/pngopacity/examples/ex3.htm uses 1000x1 and that seems to work for me, even in ie5.5

Comment by Greg
posted Jul 07, 2007

Link bug in IE 6.0 solution: a {position: relative} for that affected link. :-)

Comment by Gab
posted Jul 23, 2007

Nice. Almost perfect. Only problem is that IE7 will load the background 2 times, as it doesn't ignore .trans_box2[class]. This is not a big deal in this case, but it was for me.

What I did was create a perfectly normal stylesheet with no hacks. I used ID selectors to apply my background image, like I normally would. IE6 and below won't display the PNGs properly using this stylesheet.

Next I linked a second stylesheet (containing the PNG fix codes) to my page. So that the browsers apply both stylesheets at the same time, we need to apply an identical title attribute to both these styles. Now since I only wanted IE6 and below to use the second stylesheet, I applied IE's conditional comments for the second stylesheet (http://www.quirksmode.org/css/condcom.html)

The last thing to do was add "background: none !important;" to the div containing the background image in the second stylesheet, so that the background image only shows for the class selector (fixed PNG) and not the ID selector.

So basically I can now style any div normally using IDs, and if it happens to contain a PNG background, I just add the class that will be used in the second stylesheet to it, and in the second stylesheet add the ID containing the PNG. A lot less complicated imo.

Comment by Anders
posted Jul 25, 2007

Gab: After many frustrating hours, I found the same solution as you regarding the IE7-problem, with one difference; You don't need "!important" behind "background:none;" as long as the IE6-specific stylesheet is included into the markup later than the general stylesheet. So that saves you another, er, 10 bytes. ;)

Comment by Gab
posted Jul 30, 2007

Hehe, I just put !important to be on the safe side :P

Comment by Pranjal
posted Jul 31, 2007

It is really great job. It has solve my big padding work. I already used this tag but not repeat the image. Thanks and Nice work :)

Comment by Frank
posted Aug 09, 2007

Thanks so much for the "IE Link bug" solution!!

Comment by Nicklay
posted Sep 05, 2007

Can you apply this to a href class?

Comment by Saz
posted Sep 11, 2007

Can't get the position:relative for the link bug working if the container with the background png is positioned either relatively or absolutely. If I take the positioning off, it works.

I tried cutting the png to the sizes in the table. That didn't work either.

Comment by Rob C
posted Sep 20, 2007

So I have to use a png to do this, while FF works by simply setting the background color and opacity values?

Comment by Serge
posted Oct 10, 2007

ok...if i need a vertical background not a horizontal (DIV gives only horizontal background), how shall I use this?

Comment by Bryan
posted Oct 14, 2007

This looks nice, but any links on the page will not work in IE. There needs to be another fix.

Comment by Sarah H
posted Oct 17, 2007

It seems like this is still a valid option for transparent backgrounds as Angus Turnbull's method that you linked to does not function with PNGs that are tiled.

Comment by Bruno Martins
posted Oct 17, 2007

Thanks, great help! The only size that worked for me was 1x1, with the other ones, there were some links that worked and others that didn't based on their positions.

Comment by zincou
posted Nov 06, 2007

http://www.cssplay.co.uk/opacity/png.html for the links, position:relative works but needed sometimes on the parent span or p , even a z-index sometimes. when images i use an _background instead of important

posted Nov 06, 2007

Thanks a lot! Realy good!

Comment by Stephanie
posted Nov 13, 2007

Hi, can somebody tell me exactly where to add that hack. Im really new at this and i get confused in the technical language.thanx

Comment by Mat Delamere
posted Nov 26, 2007

I don't do a lot of web design as i'm more program orientated but i'm a little confused as to how to get this to work. the css hack and html don't seem to ad together to me. can somone link me basicly where to use the code in a example situation so i can see the layout and syntax as it makes sense but i've tried lots and don't seem to be able to get it to work.

Comment by Matias
posted Nov 26, 2007

Hi, I have been trying for hours to get the solution posted by Angus Turnbull to work. the one where you have to add the htc file, the blank gif and the css code. I cant get it to work. I would be really thankful if someone could send me a complete working semitransparent web file so that i could open it and see for myself exectly how everything is done. I know it sounds like too much and maybe im not earning my stars but i just cannot put the things in the right order. thank you

Comment by Mark Abucayon
posted Dec 09, 2007

Nice tutorial, saves my day. cool

Comment by Maverynthia
posted Dec 09, 2007

I'm actually having this work in Firefox, while the Crazy image filter makes it work in IE, FF doesn't want to read the .stuff[class]{ bacgroundcssstuff} so if I get it working in one browser, ir creaks in the other...

Comment by Diego Martorelli
posted Jan 18, 2008

i think the best way arround this is to use 2 divs, one for bg and one for content, and then using JS resize the background div when changing the content, thats how i do it. not too hard and works on all browsers.

Comment by video izle
posted Feb 28, 2008

Thanks a lot for this information! good article!

Comment by adet dönemi
posted Feb 28, 2008

Very useful, thank you very much for sharing your information!

Comment by iş ilanları
posted Feb 28, 2008

I agree with you.Links now work in IE 6.0.I like this work and ı look forward your other works.

Comment by Rick Stock
posted Mar 20, 2008

Thanks for the explanation of the IE filter/div/link bug - that was driving me mad! Great article...

Rick

Comment by kunter
posted Mar 27, 2008

You can replace the IMG tag with a DIV at which you can take the IE-only benefits of filters as a layer background:

if (navigator.platform == "Win32" &amp;amp;&amp;amp; navigator.appName == "Microsoft Internet Explorer" &amp;amp;&amp;amp; window.attachEvent) { document.writeln('<style type="text/css">img { visibility:hidden; } </style>'); window.attachEvent("onload", fnLoadPngs); }

function fnLoadPngs() { var rslt = navigator.appVersion.match(/MSIE (\d+.\d+)/, ''); var itsAllGood = (rslt != null &amp;amp;&amp;amp; Number(rslt[1]) >= 5.5);

for (var i = document.images.length - 1, img = null; (img = document.images[i]); i--) {
    if (itsAllGood &amp;amp;amp;&amp;amp;amp; img.src.match(/\.png$/i) != null) {
        var src = img.src;
        var div = document.createElement("DIV");
        div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizing='scale')"
        div.style.width = img.width + "px";
        div.style.height = img.height + "px";
        img.replaceNode(div);
    }
    img.style.visibility = "visible";
}

}

Apart from the subject, avoid using "click here" or "this" to highlight web links on web pages. This causes problems for users with a visual impairment along with the anti-semantical structure causing burden on search engines.

Jakob Nielsen, a leading web usability pundit, says, "Don't use 'click here' or other non-descriptive link text." According to web programmer Jutta Denenger, "If you owned a shop, you'd write 'Welcome' on the door, not 'Open this door to enter the shop.'"

best regards p.s. the a.m. solution is posted on http://www.youngpup.net/projects/sleight/demo.html you can check the demos; as for the below part, the sentences were taken from Wikipedia you can always check.

moreover; your site's commentary system not only promotes free speech, but also shows how it is being abused deliberately to cheat SE's. Check out your Database for URL's just like the entries with Feb.the 28th post date.

again, best regards.. good site you have; kunter ilalan, web designer

Comment by Joshua Ellis
posted Mar 27, 2008

This site is incredibly useful! Thank you very much... this is information I'll be using for years. Microsoft is good job security...

Comment by wombat
posted Mar 29, 2008

Hi all!

I have a problem with this transparency on this page: www.irorszaginfo.com. It doesn't work in IE6 under Win2000. The DIV that originally has a transparent .png background in my case is just a simple gray background. Could anybody help me?

Comment by jason millward
posted Apr 03, 2008

perfect. just what i was looking for thanks

Comment by andreas
posted Apr 16, 2008

Finally! After many hours of searching and tryouts... especially the Link Prob in IE6 BIG THANKS!!!!

Comment by Stylesheet
posted Apr 18, 2008

Thank you man, you have helped me alot.

Tried it several times in Firefox and IE 7 - smoothly. Also post it in my blog: http://www.rofaldez.com/webpage/transparent-png-in-html.html

Comment by 婚紗相
posted Apr 30, 2008

Link bug in IE 6.0 solution: a {position: relative} for that affected link. :-)

Comment by Nauck Berlin
posted May 31, 2008

Thanks for this great tool, it helped me to make the website much more pretty. Greetings Nauck

Comment by FlowerMountain
posted Jun 27, 2008

This is very good, but doesn't seem to work unless there is either "position:absolute" or a float. Is there any way to not have any of those?

cheers

Comment by Ram
posted Jul 16, 2008

I am have problem in using this transparent window. I am able to select the option in the select box even after applying a transparent screen. Can any body help me so that the select box is disabled.

Comment by Richard
posted Aug 02, 2008

Worked great for me but I had one issue with "sizingMethod=scale," it skewed my png removing it fixed the issue.

Comment by silent
posted Aug 23, 2008

You can catually solve the IE7 problem by using an HTML filter like this: "* html .trans_box2 {" - this will make IE7 ignore it, but not older IE versions.

Comment by Mack
posted Sep 11, 2008

Your a bloody G -uis

Comment by Flownetwork
posted Sep 20, 2008

Thanks! U rock!

Comment by Peter Green
posted Oct 01, 2008

Hey, thanks! But the link in the first update doesn't work, and it's the most important one i guess.. What's the solution provided in there? Thank you..

Comment by Akhil
posted Oct 15, 2008

Gr8 thanks i was looking this from lomg time

Comment by Kane
posted Nov 28, 2008

OKAY! Finally got it allllll working :D

You do NOT need a special sized image to work in IE. I have gotten around all IE's STUPID bugs with this.

This may not be a viable option for everyone but this makes your links work, including form buttons and anything else. It also stops IE 7 from doubling up on the background image and making it less (or not at all) transparent.

Here's a quick example.. email me if you need more help.

<div class="mybackground"> &nbsp; <div class="mytextbox"> &nbsp; </div> </div> <div class="mybackground2"> &nbsp; <div class="mytextbox2"> This is where you actually put your text! Not in the first one.. so this is ontop of the background and transparencies etc so NO BUGS. </div> </div>

STYLE SHEET

.my_background {

z-index:1;

position:absolute;

width:500px;

height:500px;

top:100px;

left:100px;

/* Mozilla ignores crazy MS image filters, so it will skip the following */

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/images/bg.png');

}

.my_background[class] {

background-image:url(/images/bg.png);

*/ Unset the IE filter if using IE7+ */

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='');

}

.mytextbox {

z-index:2;

position:relative;

width:200px;

height:100px;

top:100px;

left:100px;

display:block;

/* Mozilla ignores crazy MS image filters, so it will skip the following */

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/images/textbox.png');

}

.mytextbox[class] {

background-image:url(/images/textbox.png);

*/ Unset the IE filter if using IE7+ */

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='');

}

.my_background2 {

z-index:3;

position:absolute;

width:500px;

height:500px;

top:100px;

left:100px;

display:block;

}

.mytextbox2 {

z-index:4;

position:relative;

width:200px;

height:100px;

top:100px;

left:100px;

display:block;

}

Comment by Henrik
posted Dec 02, 2008

Seems like we can get around the "not-able-to-click" in ie6 if you attach the onclick event by javascript after onload, then explicitly set on the element in question. Could easily be built into the script. No more position:relative or being limited to 1x1 images. Haven't finished my testing yet but it looks really promising.

Comment by Cem Çetintaş
posted Dec 17, 2008

Thanks for solutions. Those widths and heights don't work for me but a {position:relative} is the best solution for me... Thanks Greg too :)

Comment by eglence
posted Dec 19, 2008

It doesn't work in IE6 under Win2000. The DIV that originally has a transparent .png background in my case is just a simple gray background. Could anybody help me?

Comment by Stellan Klebom
posted Dec 25, 2008

There is a mathematic relation between background image dimensions and what area of links that will be clickable in.

Assume DIV.trans_box2 is X units wide and Y units high and background image has dimensions n x m. Origin is upper left and y-axis is in downward direction.

Any part of a link falling in the Area ( 0, 0 ), ( X*(n-1)/n, Y(m-1)/m ) will not be clickable.

The current example has n=10 and m=2. As a result almost half of the DIV is excluded. Examine in IE6 and notice only the bottom part of the link can clicked. The 1/10 at right falls outside the link, so you won’t be able to click at upper half in this case. Also try shrinking the window so the link wraps to seven lines and notice that above is true.

Comment by Michael
posted Feb 13, 2009

Very cool.

Is it easy enought to give the trans_box2 element curved corners?

Thanks for any thoughts.

Comment by hanzo
posted Mar 06, 2009

Great guide! Thanks a lot for it! don't see how this could be any easier! :)

Comment by knoedels
posted Mar 16, 2009

This works fine except for a strange flaw; I don't seem to get the opacity in IE higher then about 50% even when the the opacity of the png is set to 100%!! Any suggestions? This is the url (white transparent background) http//moedigvoorwaarts.nl

Comment by Mittal Patel
posted Mar 20, 2009

Helped a lot.

Thanksssss

Comment by ja dw
posted May 26, 2009

I had problems with links when I made a semi-transparent background using the AlphaLoader. However, I read some comments here and found an easier solution than messing about with image sizez (not before trying 9x9 to find it didn't work).

Just put in the below CSS and all links will work fine.

a{ position:relative; }

Comment by Mark
posted Jun 05, 2009

hmmm interesting topic...

I have done this by searching the web I don't expect it to be this simple

I implemented the javascript that uses the same function "AlphaImageLoader" well it works just as fine...

Comment by Ruben Sun
posted Aug 10, 2009

easiest way to PNG support in IE6. Link updated here:

http://blog.bjorkoy.com/2006/12/12/flawless-and-fast-png-support-in-ie6

Comment by Trucuri
posted Aug 20, 2009

You can also use jQuery. It's fast, easy and solves the problem. Take a look here: http://jquery.khurshid.com/ifixpng.php This is how i do it.

Comment by ruzam
posted Sep 18, 2009

Another solution ? ... To avoid IE8 bug link, we can add another <div> element

<div class="trans_box2" style="float:left;"> --> <div style='position: relative;'> <-- <a href=" combined with bees, they make honey...</a> --> </div> <-- </div>

Thanks to this, we can use absolute positioning in trans_box2 class and links still works :)

Comment by Daniel Hunninghake
posted Sep 27, 2009

A quick and dirty fix that works...and no javascript. Yep, you just made my day.

Comment by Jeremy Edgell
posted Oct 06, 2009

I will admit that the idea I had comes from basing my ideas around this posts, but I've been able to successfully do this without PNGs.

Take a look:

http://kiveo.net/transparent-backgrounds/

Comment by Michael
posted Apr 14, 2010

Q: Has anyone ever managed to get hyperlinks working on the div in IE6?

A: Use 2*10 PNG-8 image

Comment by Ernesto
posted Apr 16, 2010

Hi, I´m a beginner, and I just found this post and I think that`s amazing, it´s just whant i was looking. I have only a simple question: How to make that the layer borders become rounded?. Thank give my regards.

Comment by web designer kanpur
posted May 01, 2010

its not working ie6

Comment by atasözleri
posted May 02, 2010

Yeah, thanks again but IE6 doesn't worked it.

I want to help anyone please..

Comment by Greg Bown
posted May 18, 2010

Finally someone has a true cross browser solution without all the stupid JavaScript hacks that break! This is so simple. The only difficulty was weeding through all the misinformation on the web. Thank you!!!

Comment by Saqib M. Bhatti
posted May 23, 2010

Hi Can anyone please tell me how to use the above classes as nested classes? As the moment you nest that filter class or the selector [class] its stops displaying background image both in IE and FF

I'm trying to have it as background of a jQuery Flyout menu and need it as following nested structure

ul.sf-menu li.sfHover ul {} and ul.sf-menu li.sfHover ul[class] {}

can anyone answer my query?? Thanking in anticipation.. Regards, S.

Comment by Shan
posted Jun 01, 2010

The javascript is better, that's the real solution. It's funny how a company other than microsoft created a solution for this.

Comment by ITalez
posted Jun 21, 2010

A simpler, cross-browser way to achive semi-transparent images using GIF: http://italez.wordpress.com/2010/06/21/gif-semi-trasparenti-ed-ie6/

Comment by Alex Stanhope
posted Jul 25, 2010

Hi Lloyd,

I think I've encountered a new type of IE CSS transparency bug. I've made a demo that exposes this IE transparency bug ( http://thinko.pe/staticpages/demo/bug1/index.html ) which renders correctly in Firefox but cuts a hole out of the top div in Internet Explorer (tested in IE7 and IE8). Do you know of any CSS hacks or workarounds I could apply to get Firefox-like behaviour in IE?

Cheers, Alex

Comment by Forouzani
posted Aug 26, 2010

Using javascript is the cleanest way to apply semi-transparency properly, but then it doesnt work if you have JS disabled.

Comment by ADMEC Multimedia
posted Oct 04, 2010

it's really very important post, i have gone through many posts but it is the most beautiful explaination,

Thanks, Ravi Bhadauria ADMEC Multimedia New Delhi

Comment by kkk
posted Oct 07, 2010

nice, thanks for help

Comment by Unique
posted Oct 17, 2010

The easiest way....

head <style> div.EXAMPLE1 {background:url(NAME.png) no-repeat; height:XXXpx; width:XXXpx} </style> <!--[if gte IE 5]> <style type="text/css"> div.EXAMPLE1 { background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='NAME.png' ,sizingMethod='crop'); } </style> <![endif]--> head

+

<td> <div class="EXAMPLE1"> </td>

Take a look:

http://www.studiouniquedesign.com/usluge.html

page source: from 32 - 43 (for web design shape) + 205 - 235

Comment by Firma Ekle
posted Oct 23, 2010

Awesome article. Much thanks again. Really Great.

Comment by Bodo
posted Nov 08, 2010

Hello

Did someone realize that the bold text in the div (I like flowers) is rendered very ugly in IE8 (even more if the text-size is smaller)? While it looks perfect with firefox or chrome? Can someone solve that problem? Thanks

Comment by Tihomir Ipotpaliev
posted Dec 12, 2010

My favorite browser is Opera. Will it work this technique for sites viewed in Opera?

Comment by Justin
posted Jan 26, 2011

Yes, I noticed that the text in ie comes out with a pixelated - ie non-anitaliased effect. Looks awful - bad enough to not do it. This page does it too - just the text that is on top of the semi-transparent background.

Any ideas anybody?

Comment by Justin
posted Jan 26, 2011

Have fixed ie font problem! Well not me...

http://bjorkoy.com/2007/04/the-easiest-way-to-png/

This is referred to earlier, but the URL is out of date...

Comment by CT
posted Feb 12, 2011

Thanks, this helped me alot!

Comment by NJ DWI Attorney
posted Mar 02, 2011

Although the Microsoft documentation for AlphaImageLoader it's broken .. I search for it and found it .. Thanks ..

Here it is .. http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx

Comment by
posted Mar 15, 2011

lll

Comment by laws
posted Jun 13, 2011

Really innovative way of using CSS great help! thanks.

Comment by mac fix
posted Jun 26, 2011

great explanation! These techniques are a big future for designers. thanks!

Comment by
posted Jul 23, 2011

asdads

Comment by Ganesh
posted Aug 11, 2011

check this out, a semi-transparent pixel generator http://www.codevu.com/pixelgen/ :)

Comment by aziz
posted Aug 16, 2011

It is realy worked for me. thanks

Comment by Lars
posted Sep 02, 2011

Great guide! Thanks a lot for it. I don't see how this could be any easier! :)

Comment by web agency canada
posted Sep 14, 2011

Hello, it works amazingly on my website, thanks. http://www.maurisource.com/

Comment by Deepak
posted Sep 19, 2011

Thanks for code.