HTML/CSS: Transparent iframes in All Browsers
Contributed by William_Wilson 
Tagged: Web application programming 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)
You may also like -
Trillian: How to Enable Transparency for a Window
Duplicate Tab in Firefox and Internet Explorer 7 (IE7)
HTML: adding a website address bar icon or favicon
Users Cannot Vertically Scroll in Safari, OmniWeb, Konqueror and WebKit Browsers
IE7: Using IE6 and IE7 together
Google Chrome: Use the Keyboard Shortcuts
Make XP look like Windows Vista / Longhorn for free!
Firefox: Changing User Agents to Get Access to Extra Content
Mike said on October 2, 2008
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?
el_guapo said on October 9, 2008
finally :)
thanks…
jaz said on June 23, 2009
why is it not working on ie 7.0.0.6
Anonymous said on November 25, 2009
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)
Marco said on March 20, 2010
Thanks for the info, I’ve used your code to write http://www.marcorama.nl/p/tweetmeme-button-transparent-in.html.
HTH
Marco
Sam said on March 22, 2010
FYI: ALLOWTRANSPARENCY is not valid html – stupid but true.
Maxim Tarasenko said on May 23, 2010
thank you very much
MikeyC said on June 8, 2010
Brilliant! Thank you for sharing.
sue said on July 29, 2010
No, it’s not stupid. Stupid is IE to do not allow it by default…
BBNC said on August 31, 2010
…oops
BBNC said on August 31, 2010
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?
Remembrance said on September 9, 2010
Thanks ) usefull notes ) P.S. I have IE :)
Vishalpotdar said on September 10, 2010
i tried doing what all you have said, but no matter what it always show the white background in the IE.
Ranadhir said on October 22, 2010
Thats a great help… Thanks :)
Frank said on December 2, 2010
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
Marco said on December 2, 2010
Have you read http://www.marcorama.nl/p/tweetmeme-button-transparent-in.html ?
HTH
Marco
Andy said on December 21, 2010
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!
Website Design India said on December 25, 2010
nice detail
Ivanamrkic said on January 4, 2011
Does not work in Crome !!
Henk Muskita said on February 5, 2011
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. :-)
Albert Goddard said on February 25, 2011
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
Bp_one said on March 7, 2011
Hi, I have the same problem, I’ve tried everything and have made no diff. did you get there??
Bp_one said on March 7, 2011
Hey! have you a fix? where??? PLEEEEEASE!!!!!!!!!
Lisaman said on May 23, 2011
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!!
Chris said on September 9, 2011
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!
Luxury Hotels In Ranchi said on October 27, 2011
This is awesome – thank you for all this valuable information.