Cross Browser Background Transparency With CSS

Posted on Monday, May 7th, 2007

Transparency can add something beautiful to a design. Randa Clay thought so whilst designing her first WordPress theme and I have been considering something very similar for a design that has been going round in my head recently. Randa’s problem was that making the background of a <div> transparent so that the page background could be seen through it caused everything within the <div> to be transparent to the same degree, including text and images.

Transparent post level images aren’t desirable, so I set about finding out how best to apply the transparency to the <div>. Here are my results:

CSS3 Properties

CSS3 provides us with the opacity property that lets us declare the transparency of an element.

Note: This article uses CSS3 properties and some proprietary browser stuff too. This is unlikely to be valid, but I’ll try my best! Most importantly the results will be supported across the major browsers and will be (hopefully) futureproof.

What we like to call modern browsers (Firefox, Opera, Safari) support this opacity property. To make a <div> 50% transparent you can use the following code:

div { opacity:0.5; }

Setting opacity to 1 makes an element entirely opaque and setting it to 0 makes it entirely transparent.

Transparent .pngs

Perhaps using entirely CSS based properties to create the transparency is a bit much, especially since CSS3 is not yet a recommended document. We could always use a transparent .png to provide our background. This is a safe and valid method, but as we all know, Internet Explorer 6 does not support transparent .pngs.

Proprietary Code

IE6 does provide us with some proprietary code to produce the same opacity results as the CSS property. The following code makes a <div> 50% transparent in IE6:

div {
filter:alpha(opacity=50);
height:1%;
}

The height:1%; is used to give the <div> “layout” (thanks to The Strange Zen Of JavaScript).

The benefit of this code is that, unlike the CSS property opacity, setting the child elements of the transparent <div> to be fully opaque does work. You can do this as follows:

div * {
filter:alpha(opacity=100);
postion:relative;
}

Thanks to Ove Klykken.

Many Methods — None Of Which Work

So opacity doesn’t behave exactly as we want it, doesn’t work in IE7 and, like transparent .pngs won’t work in IE6. IE filters only work in IE. I decided to build together elements that worked the way I wanted them to and that will cover all the important browsers.

To keep the use of proprietary, invalid code to a minimum I decided to use conditional comments to direct the code to IE6 only. IE7 supports transparent .pngs and using this method is both valid and doesn’t cause child elements to be transparent too. Mixing them both together produces the following:

div {
background:transparent url(transparent.png);
}

and for IE6

<!--[If IE 6]>
<style type=”text/css”>
#transparent {
background:#fff none;
filter:alpha(opacity=50);
height:1%;
}

#transparent * {
filter:alpha(opacity=100);
position:relative;
}

</style>
<![endif]-->

The Finished Product

So to use the method, all you need is to create a 1×1 pixel transparent .png which can be tiled and add the code above. Please see a few examples a came up with to demonstrate the different methods and their failings. Example 4 uses the above code and has been tested in IE6 and 7 (it doesn’t work in IE5, but who uses that any more?), Firefox 1.5 and 2.0 and Opera 9.2. I have to assume it works in Safari, but I just can’t check, let me know if you can.

I hope this helps out, let me know if you find somewhere to use it!

If you enjoyed this post, why not subscribe to Unintentionally Blank

Posted in Articles, CSS | Trackback | Leave a comment


Comments

  1. 1May 7th, 2007 at 1:51 pm

    Yvonne Says:

    I’ve been having problems with IE6 and transparent pngs … so I just used gifs instead. This is probably a better idea though, heh.


  2. 2May 7th, 2007 at 2:53 pm

    Randa Clay Says:

    Thanks, Phil, for this very thorough post. I will give this a try!


  3. Pingback by How to make your backgrounds transparent using CSS at Randa Clay Design
    May 7th, 2007 at 4:55 pm

  4. 3May 7th, 2007 at 7:06 pm

    Phil Says:

    Yvonne: This particular trick is just for solid colour transparency, if you were to check the icons I use in IE 6 you’d find they are showing as nasty little blue square instead of transparent as they were intended. There is another trick to make IE6 display them properly, I’ll have to look into it.

    Randa: Glad I could be of service! Your theme is beautiful and I just wanted to help it on it’s way.


  5. Pingback by links for 2007-05-07 | The Marketing Technology Blog
    May 7th, 2007 at 7:20 pm

  6. 4May 8th, 2007 at 7:28 am

    Yvonne Says:

    There is another trick to make IE6 display them properly, I’ll have to look into it.

    Ooh, that’d be appreciated Phil.


  7. 5May 8th, 2007 at 12:32 pm

    Daniel Sitter Says:

    Thanks for such great information. I am starting a new technology blog in WordPress (first effort) and have been finding it ackward and archaic compared to TypePad. It’s great to find resources like your blog to help me. Keep up the great work. Thanks again!


  8. 6May 9th, 2007 at 1:44 pm

    Phil Says:

    Yvonne: I’ll be on it really soon!

    Daniel: Thanks for stopping by. I have never used TypePad but what makes WordPress awkward? If you need any help on particular parts, please feel free to email me.


  9. 7July 20th, 2007 at 1:46 am

    andy Says:

    hmm

    I’ve seen a lot of coders using the [if ie ]statement. I’m wondering if any of you are aware it only works if the user has enabled the feature in i.e.?
    IN service pack2 it was turned of by default. There are a few articles online that discuss this.
    That said I’ve also seen contradictory articles to that though have found in my own personal use and tests on clients computers for it to be true.
    In that case don’t discard the relevant css hacks to over come the issue. It is the only guaranteed way for it to work.

    It as well also to remember what you see does not necessarily mean the end user will see the same.

    :)


  10. 8July 24th, 2007 at 11:09 am

    Ajith Says:

    Thanks a lot……….It works…..!!!


  11. 9July 26th, 2007 at 12:43 am

    Mikael Says:

    No this does not work on Safari. Example 4’s transparent PNG displays darker than the FireFox version. It looks like 50% black not 50% white.


  12. 10July 26th, 2007 at 8:58 pm

    Phil Says:

    Andy: that’s an interesting point. I’ve never seen anything about this issue before. Do you have any links to evidence on this? I’d love to see some as it would certainly change my perspective on things!

    Ajith: Thanks for dropping by, I’m glad I could help out!

    Mikael: I have checked this and you are right now. There is an issue with colour shifting in Safari, I’m looking into ways that could fix this and will update the post as soon as I have something.


  13. 11August 2nd, 2007 at 7:46 am

    Todd Harrison - LA Headshot Photography Says:

    It’s a bummer that IE never stays consistent. bill gates please do something. as for foxfire I love yeah!
    I’m glade you have found a way to solve this problem.


  14. 12August 2nd, 2007 at 11:30 pm

    Phil Says:

    Hi Todd,

    I don’t think Bill can do anything about the issue, besides, he probably doesn’t care any more! However, we are lucky that Molly Holzschlag is working for Microsoft now and can only hope that IE continues to improve over the coming years (yes, it will take years I’m sure).

    At least there are ways around it! Glad I could help out with this solution.


  15. 13August 25th, 2007 at 1:03 am

    Deal Locker - Free online coupons Says:

    OK I am in awe. CSS makes head hurt, and you guys have taken things to a whole new level. I have given up on trying to do anything fancy on my blog because every time I get it working in OSX Firefox I toast windows IE. Nice work.


  16. 14February 2nd, 2008 at 4:35 pm

    bobbi Says:

    uhm…..good solution, thanks..
    we can also use the javascript to fix png image ’s transparent (you can find it by google!! :) ). I think that ’s a solution too, but , it may be a bit slow when you load the site than this.
    thank you again -> bookmark :):)


  17. 15March 19th, 2008 at 10:45 pm

    Mike, Cincinnati OH Says:

    Nice trick, I am wanting to add a picture (ok a few) into this transparent box, I do not want to make an absolute position for these pictures, because some of these will be dynamically added when a user enters in pictures. any advice?


  18. 16March 21st, 2008 at 2:10 pm

    Phil Says:

    Hi Mike,

    I’m not sure I know what you mean, I’ll email you to get further details and see if I can help.


  19. 17April 7th, 2008 at 1:51 pm

    rzrarti Says:

    thanks for the trick :) Very usefull one


  20. 18May 13th, 2008 at 12:13 pm

    Ashis Mohanty Says:

    Hello Mike,

    Could you please help me Why this UL and LI tags are not supported in IE-6 where as in others it works perfect.

    URL: http://prosems.com/preview/currencySource/website/

    If I am remove this “display:block ” from “ul#menuWrapper li a.separator” property it works, But I need this.

    …………………………………………………………….
    Thanks & Regards,
    Ashis Kumar Mohanty


  21. 19August 20th, 2008 at 10:40 pm

    Amanda Says:

    Wow this is just what I was looking for. I can’t wait to try it out!


Leave a Comment