February 9, 2001 - Creating Transparent Frames

Yehuda Shiran February 9, 2001
Creating Transparent Frames
Tips: February 2001

Yehuda Shiran, Ph.D.
Doc JavaScript

One of the advantages of the new IFRAME tag in Internet Explorer 5.5 and Netscape 6 is that you can make the inline frame transparent. This page shows a frame overlpping a banner. You can read the banner because the frame is transparent. To make a frame transparent, you have to:

ALLOWTRANSPARENCY="true" to the IFRAME element tag.
  • Add
    • STYLE="background-color:transparent" to the BODY tag of <fileName> that is being sourced in the IFRAME tag (SRC=<fileName>).

    Here is the code to implement the example above:

    <IFRAME NAME="Frame1" SRC="010209d.html" 
ALLOWTRANSPARENCY="true" STYLE="position:absolute; top:20; left:50; z-index:3">
    And the BODY tag of 010209d.html is:

    <BODY STYLE="background-color:transparent">