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.