Coding Day

32 Comments

1. Cale says:

   31 October, 2006 at 07:06

   excellent bit of info there it really helped to make transparent divs that work on both firefox and IE thankyou
2. Marcos Buarque says:

   23 May, 2007 at 23:56

   Hi, good short tutorial. What is the solution when I need the text within the DIV to be 100% opaque over, let’s say, a 60% transparency DIV? As far as I could see testing, the text gets faded in the same scale as the div even if I put a 100% opaque tag inside the DIV. Thanks.
3. Amidala.be: insanity leads to poetry … or just a weblog. » Blog Archive » My del.icio.us bookmarks for June 5th through July 24th says:

   25 July, 2007 at 21:45

   [...] Transparent DIV SPAN for all browsers | Can Erten – [...]
4. Peri says:

   6 March, 2008 at 23:49

   Wow, it works, excellent!
   Do you mind if I share and translate this to another language on my blog?

   Many thanks
5. Peri Net » [CSS] Membuat Layer DIV Transparan yang Sukses di Semua Browser says:

   7 March, 2008 at 00:11

   [...] Terimakasih Can Erten! [...]
6. Can says:

   7 March, 2008 at 14:08

   You are very welcome indeed.
7. Hebbarus says:

   18 March, 2008 at 19:17

   Good stuff! Just what I was looking for. Works great!
8. Johnny Russell says:

   22 March, 2008 at 05:54

   What I do if I want to make a div with a transparent background but have text show up opaque is I make two divs with identical properties. Then, I take one div, put it behind the other, and make it transparent. Then, I put all of my content in the other div. Therefore, one div is used for content and is opaque; the other div is used for the background and is transparent. That’s just what I do. There may be a better way.

   Que te vaya bien.
9. riri says:

   23 April, 2008 at 10:44

   thanks, simple & easy, it’s works!
10. Chris says:

    12 June, 2008 at 13:13

    Great example. I’d only note that Firefox now simply supports “opacity”, so you don’t have to use “-moz-opacity” anymore.
11. Streusel says:

    10 July, 2008 at 18:33

    Works, but IE6 blocks “filter:alpha(opacity=60);” and shows a yellow bar so you manually have to enable it to get the visual effect…

    A tip to others: if you only want the bg transparent and not the contents, you better put a div just behind the div you are using where you apply a white semi-transparent background.
12. lagreen says:

    26 July, 2008 at 18:22

    it’s just what i need . thanx
13. Jakov says:

    23 September, 2008 at 15:43

    Thanks man! that I needed!!! Thanks again!
14. jadeyaya says:

    2 May, 2009 at 22:17

    Thank you for solving my IE problem.
15. Robbie says:

    14 June, 2009 at 07:20

    Thanks!
16. jukarpenz says:

    21 June, 2009 at 06:39

    thank u so much bro
17. Kirill says:

    25 June, 2009 at 18:37

    Thank you!
18. Dartkrs says:

    7 July, 2009 at 07:11

    Simple and it works. Thank you very much, it solved my problem completely.
19. Nazar says:

    15 July, 2009 at 04:59

    Great…
20. Bhanu says:

    13 August, 2009 at 11:33

    Excellent, thats really a great post!!!
21. rizomer says:

    15 August, 2009 at 18:10

    this opens horizons. thanks.
22. Sunjit S Nair says:

    27 September, 2009 at 04:59

    Excellent idea, Thanks a lot.
23. Greg J says:

    22 October, 2009 at 09:40

    Hi,

    Everyone seems to be having success getting this to work in IE. I’m using IE8 and it’s not working for me. Here is the css I am using for the transparent div:

    #feedscroller {
    display: block;
    background: #fff;
    overflow: scroll;
    width: 598px;
    height: 390px;
    border: 1px solid #c6cdb4;
    opacity: 0.5;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    }

    any ideas anyone?
24. Vince says:

    28 October, 2009 at 15:27

    Does anyone know what the performance difference is using this method over using a 1 pixel semi-transparent png?
25. Nic Hanafey says:

    9 November, 2009 at 12:39

    Hey there,

    Thanks so much! This worked perfectly- now my page works in IE, Firefox and Chrome

    Cheers
26. Shelly Caldwell says:

    22 December, 2009 at 00:51

    Remember you have to have a width (‘auto’ won’t work) for this to work in IE7
27. Valeriano Cossu says:

    26 January, 2010 at 04:37

    Superb!
    Cheers
28. wayne says:

    27 January, 2010 at 02:59

    Hey everyone. I love this. I have one more question: How do I get just the background to be transparent. Right now, EVERYTHING associated with the element is transparent.

    #main {
    background:#000000;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    }

    Content

    The container is transparent, and so is the text and that is my problem. Any help would be great, thanks.
29. donjoe says:

    17 February, 2010 at 13:21

    Apparently the only way is to move your content outside the transparent container (HTML-wise) and then use trickery to make it _visually_ appear on top of the transparent container when the page is rendered. (One suggested trick has something to do with negative margin values in CSS.)
30. anish says:

    25 February, 2010 at 04:42

    thanks Coding Day !!! it works well in IE hell
    and also thanks Shelly Caldwell ! for giving valuable tip about the width property.
31. Saikat says:

    28 June, 2010 at 10:35

    #transparency {filter: alpha(opacity=55); -moz-opacity: .55; background-color:#EEE; position:absolute; top:450px; left:110px; }
32. santosh says:

    15 July, 2010 at 11:33

    Thank you so much for this code……..it’s working…..