HTML/CSS: Transparent iframes in All Browsers

How to write your iframes code so that all browsers get the same transparency effect.


Browsers such as Mozilla or FireFox use transparent as the default when no image or color is supplied. Allowing the image or color of the underlying frame to show through. Unfortunatly for older Netscape and all Internet Explorer (including Beta 7) they have chosen to make the default a white background. But it is an easy fix to have this transparency in all browsers.

when constructing your iframe:

<iframe width="70%" height="500px" name="about" src="about.html" frameborder=0 ALLOWTRANSPARENCY="true"></iframe>

*set src= to another webpage to be displayed internally (for those unfamiliar with ifram).
-height and width may be set in pixels (px) or % of the screen (%).

by adding the last command ALLOWTRANSPARENCY=”true” we are half way to allowing transparency in all browsers.

The next and last step is to modify the source of the iframe.
*we have allowed transparency but not applied it yet.

<body STYLE="background-color:transparent">

by adding this css style type directly into the body tag (and do not put an image or color here) we create a transparent background.
Combining both steps and your page will look great no matter what browser view it.

Questions/Commnets: william_a_wilson@hotmail.com
-William. § (marvin_gohan)

The Conversation

Follow the reactions below and share your own thoughts.

31 Responses to “HTML/CSS: Transparent iframes in All Browsers”

  1. October 02, 2008 at 2:35 am, Mike said:

    Great post,

    What if your iframe isn’t internal. Lets say for instance it is an iframe from a google doc you have embedded into your page. How do you go about making that iframe transparent?

    Reply

  2. October 09, 2008 at 5:36 am, el_guapo said:

    finally :)
    thanks…

    Reply

  3. June 23, 2009 at 9:56 am, jaz said:

    why is it not working on ie 7.0.0.6

    Reply

  4. November 25, 2009 at 12:32 am, Anonymous said:

    I’ve literally been hunting the entire WWW for a solution for this problem & finally got it thanks to you. =) I have one more doubt though. When I load the main page, initially, the iframe area (enclosed in a ‘td’) is white and doesn’t display the background of the td. When I load the other page into the iframe, it works then. Can you suggest a method for the td background to load initially too? (The compatibility issue is IE here)

    Reply

  5. March 20, 2010 at 7:12 pm, Marco said:

    Thanks for the info, I’ve used your code to write http://www.marcorama.nl/p/tweetmeme-button-transparent-in.html.
    HTH
    Marco

    Reply

  6. March 22, 2010 at 5:21 pm, Sam said:

    FYI: ALLOWTRANSPARENCY is not valid html – stupid but true.

    Reply

    • July 29, 2010 at 11:58 am, sue said:

      No, it’s not stupid. Stupid is IE to do not allow it by default…

      Reply

  7. May 23, 2010 at 12:54 pm, Maxim Tarasenko said:

    thank you very much

    Reply

  8. June 08, 2010 at 9:57 am, MikeyC said:

    Brilliant! Thank you for sharing.

    Reply

  9. August 31, 2010 at 3:36 am, BBNC said:

    …oops

    Reply

  10. August 31, 2010 at 3:37 am, BBNC said:

    A blast from the past. How do I make the script write the iframe on page load as opposed to when the “Go” link is clicked?

    Reply

  11. September 09, 2010 at 12:07 pm, Remembrance said:

    Thanks ) usefull notes ) P.S. I have IE :)

    Reply

  12. September 10, 2010 at 7:07 pm, Vishalpotdar said:

    i tried doing what all you have said, but no matter what it always show the white background in the IE.

    Reply

    • March 07, 2011 at 12:00 pm, Bp_one said:

      Hi, I have the same problem, I’ve tried everything and have made no diff. did you get there??

      Reply

  13. October 22, 2010 at 8:56 am, Ranadhir said:

    Thats a great help… Thanks :)

    Reply

  14. December 02, 2010 at 12:32 am, Frank said:

    Hi guys,

    I realize this is quite an old thread, but still i give it a try.

    I am trying to get the background of an inline frame made in webbuilder 7.1 to be transparent, it is so in Safari, but on IE it remains white, even after trying the allowtransparent=true etc.

    Here is a link to the page: http://www.thomas-vernhes.com/calendar_uk.html

    i hope someone can help me out here as i have spend most of this day on figuring it out but remained unsuccesfull :-)

    Best regards,
    Frank van Nunen

    Reply

  15. December 21, 2010 at 11:47 am, Andy said:

    Hello All,

    This works very well indeed!

    You can set a style rule of background:transparrent; directly to your iFrame if your unable to put it on the body class. Looks great in ie6!

    Reply

  16. December 25, 2010 at 6:53 am, Website Design India said:

    nice detail

    Reply

  17. January 04, 2011 at 12:29 am, Ivanamrkic said:

    Does not work in Crome !!

    Reply

    • February 05, 2011 at 1:31 pm, Henk Muskita said:

      Take a look at http://members.tele2.nl/tele2_user/

      See here the transparancy in action.

      You have to put this in your html code of each page you write:
      body style=”background-color:transparent”>

      By the the page you have your iframe write as fallow;

      iframe id=”iframe” allowTransparency=”true” scr=”#”

      This will work. :-)

      Reply

  18. February 25, 2011 at 6:14 am, Albert Goddard said:

    Posted 5 years ago and today you fix the issue, you’re the man!
    to be honest with you i don’t like iExplorer at all! XD

    Reply

    • March 07, 2011 at 12:08 pm, Bp_one said:

      Hey! have you a fix? where??? PLEEEEEASE!!!!!!!!!

      Reply

  19. May 23, 2011 at 6:57 am, Lisaman said:

    I get the internet explorer cannot find web page look and no iFrames writtten underneath. The iFrame works perfectly in facebook developper page but not my website. Do you have to Switch oniFrame in the template css or something!! 

    Reply

  20. September 09, 2011 at 12:41 pm, Chris said:

    Many thanks! I need to sow a complete book on my web site, and was exploring a horrible “import text” hack. Your simple method was exactly hat I wanted – I set aside a day to solve the problem and it only took five minutes! Thanks again!

    Reply

  21. October 27, 2011 at 11:53 pm, Luxury Hotels In Ranchi said:

    This is awesome – thank you for all this valuable information.

    Reply

  22. April 21, 2012 at 2:06 pm, kelly mans said:

    Doesn’t work for me sadly
    I’ve tried everything it won’t work, i wonder how it also works for only background colors and also with images still i can’t understand

    Reply

  23. August 12, 2012 at 5:12 pm, Dima said:

    Figure it out in IE 7, it is important that u have it camelized, have an attribute exactly like ‘allowTransparency’ and it will work in IE

    Reply

  24. October 25, 2012 at 5:53 pm, Stéphane said:

    Finally, something that works!!! Thanks a lot.

    Reply

  25. November 20, 2012 at 3:30 am, Anonymous said:

    Just for a update.
    Evidently with the new Fire Fox CSS for iFrames you need to add the starting buffer.
    The working line for background transparency is…

    body {
    background: none transparent;
    }

    The one you show above is not correct with,
    background-color: transparent;

    Reply

  26. August 21, 2013 at 4:20 am, bejoy said:

    A BIG THANK YOU!!!

    Reply

Leave a Reply