HTML/CSS: Transparent iframes in All Browsers
Posted by William_Wilson in 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)
The Conversation
Follow the reactions below and share your own thoughts.
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?
October 09, 2008 at 5:36 am, el_guapo said:
finally
thanks…
June 23, 2009 at 9:56 am, jaz said:
why is it not working on ie 7.0.0.6
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)
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
March 22, 2010 at 5:21 pm, Sam said:
FYI: ALLOWTRANSPARENCY is not valid html – stupid but true.
July 29, 2010 at 11:58 am, sue said:
No, it’s not stupid. Stupid is IE to do not allow it by default…
May 23, 2010 at 12:54 pm, Maxim Tarasenko said:
thank you very much
June 08, 2010 at 9:57 am, MikeyC said:
Brilliant! Thank you for sharing.
August 31, 2010 at 3:36 am, BBNC said:
…oops
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?
September 09, 2010 at 12:07 pm, Remembrance said:
Thanks ) usefull notes ) P.S. I have IE
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.
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??
October 22, 2010 at 8:56 am, Ranadhir said:
Thats a great help… Thanks
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
December 02, 2010 at 11:22 am, Marco said:
Have you read http://www.marcorama.nl/p/tweetmeme-button-transparent-in.html ?
HTH
Marco
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!
December 25, 2010 at 6:53 am, Website Design India said:
nice detail
January 04, 2011 at 12:29 am, Ivanamrkic said:
Does not work in Crome !!
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.
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
March 07, 2011 at 12:08 pm, Bp_one said:
Hey! have you a fix? where??? PLEEEEEASE!!!!!!!!!
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!!
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!
October 27, 2011 at 11:53 pm, Luxury Hotels In Ranchi said:
This is awesome – thank you for all this valuable information.
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
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
October 25, 2012 at 5:53 pm, Stéphane said:
Finally, something that works!!! Thanks a lot.
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;