How to Make a Transparent iFrame
An iFrame is used to insert one HTML page into another. This is done with the iFrame tag, which will load up an external HTML page and place it inside of your existing one. This can be useful if you would like to place the same content into several different pages, but want its surrounding content to be different. iFrames can be customized in a variety of way using CSS style, including making them transparent.
Other People Are Reading
Instructions
-
-
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.
-
1
Tips & Warnings
IFrames will not come up in search engines, so do not insert too much valuable content inside of them.
References
- Photo Credit Comstock/Comstock/Getty Images
