Transparent iframes

Name: Transparent iframes
Rating: 5 (1 reviews)
Author: DanielXP

An iframe is a useful tool for embedding content within a webpage, but sometimes you might want the iframe to blend seamlessly with its surroundings.
This tutorial will show you how to make an iframe transparent by adjusting its attributes and styling the content it displays.

1. Add Transparency to the iframe

To make the iframe transparent, include the allowtransparency="true" attribute in your iframe tag:

HTML Code

<iframe name="iframe" src="mypage.html" width="50" height="50" allowtransparency="true"></iframe>

2. Style the iframe Content

The page loaded inside the iframe must have a transparent background. Add the following CSS to the HEAD section of the iframe's content page:

HTML Code

<style type="text/css">
body, html { background-color: transparent; }
</style>

Author:

DanielXP

Views:

2,182

Rating:

There are currently no comments for this tutorial, login or register to leave one.