background-color: transparent;

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

The background-color property specifies the background color of an element.

The transparent iframe can be set by applying this property to the BODY element.


body {
background-color: transparent;
}

Apply this style to the BODY element of the page to load into the iframe.

Property Value Explanation
background-color transparent transparent background color

In MSIE, the allowtransparency attribute must be specified for the IFRAME element at the same time.

<iframe src="example.html" allowtransparency="true"></iframe>

Example

The page that sets the iframe

<html>
<head>
<title>TAG index</title>

<style type="text/css">

div {
background: #ffffff url(image/back.gif);
padding: 30px;
}

iframe {
width: 300px;
height: 150px;
}

</style>

</head>
<body>

<div>

<p><iframe src="example.html">Alternate content</iframe></p>

<p><iframe src="example.html" allowtransparency="true">Alternate content</iframe></p>

</div>

</body>
</html>
The page to load into the iframe (example.html)

<html>
<head>
<title>TAG index</title>

<style type="text/css">

body {
background-color: transparent;
text-align: center;
color: #cc0000;
}

h1 { font-size: 100%; }

</style>

</head>
<body>

<h1>IFRAME example</h1>
<p>IFRAME</p>
<p>IFRAME</p>
...

</body>
</html>
Output