How to Make a Transparent iFrame
- 1). Open a text editor, such as Notepad or Text Edit. Click "File" then "Open" and navigate to the file you want to insert as an iFrame. This should have an HTML extension. Click on the file and select "OK" to open it.
- 2). Locate the part of the page that is after the header. This will be right after the "</head>" tag if you have a header. If not, then click on the top of the page. Insert the following code:
<body STYLE="background-color:transparent">
This will make your iFrame have a transparent background. Save your file. - 3). Open the file that you wish to insert your iFrame into in your text editor. This should also have an HTML extension, though it can be PHP, as well.
- 4). Scroll down until you see the part of the page where you wish to insert the iFrame. Insert the following code:
<iframe name="Frame" src="iframe.html" allowTransparency="true">
Replace "iframe.html" with the name of the file you create. You can change "Frame" to any title you want to give your iFrame. - 5). Upload both files to your website. Make sure that they are in the same directory or the file will not recognize your iFrame. The iFrame you inserted will now be transparent.
Source...