HTML/CSS: Transparent iframes in All Browsers

Contributor Icon Contributed by William_Wilson Date Icon March 8, 2006  
Tag Icon 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)

Previous recipe | Next recipe |
 
  • 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
  • razmusnordin
    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)
blog comments powered by Disqus