Warning: Invalid argument supplied for foreach() in /home/techrecipes/public_html/wp-content/themes/techrecipes/header.php on line 77

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: [email protected]
-William. § (marvin_gohan)

The Conversation

Follow the reactions below and share your own thoughts.

  • Mike

    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

    finally :)
    thanks…

  • jaz

    why is it not working on ie 7.0.0.6

  • Anonymous

    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)

  • http://www.marcorama.nl/ Marco

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

  • Sam

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

    • sue

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

  • Maxim Tarasenko

    thank you very much

  • MikeyC

    Brilliant! Thank you for sharing.

  • http://pulse.yahoo.com/_GTNQA5W2KGMNDYHXGYO2MIRJ6E BBNC

    …oops

  • http://pulse.yahoo.com/_GTNQA5W2KGMNDYHXGYO2MIRJ6E BBNC

    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

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

  • Vishalpotdar

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

    • Bp_one

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

  • Ranadhir

    Thats a great help… Thanks :)

  • Frank

    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

  • http://www.bigeyedeers.co.uk Andy

    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!

  • http://www.vainfotech.com Website Design India

    nice detail

  • Ivanamrkic

    Does not work in Crome !!

    • http://members.tele2.nl/tele2_user Henk Muskita

      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. :-)

  • http://www.facebook.com/evensgoddard Albert Goddard

    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

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

  • Lisaman

    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!! 

  • http://enterthestory.com Chris

    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!

  • http://www.lelachotel.com/accomodation.html Luxury Hotels In Ranchi

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

  • kelly mans

    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

  • Dima

    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

  • Stéphane

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

  • http://NA Anonymous

    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;

  • bejoy

    A BIG THANK YOU!!!