Transparent iframe background

May 17, 08 by the programmer

Hi,

I was inluding an iframe in a web page and I noticed that the iframe does not have the same background color as the page it was on.

So if you want an iframe to have the same background color as the surrounding environment this is how it’s done:

Step 1

Set the iframe attribute allowtransparency to true

<iframe src=”some_page_to_incude_in_the_iframe.html” allowtransparency=”true”></iframe>

Step 2

In this step you should put the following style in the include page. This tells the page that you include in the iframe to have a transparent background. That means to show the background bellow it. In our case this is the background of the page that the iframe is on.

<style type=”text/css”>

body {

background: transparent;

}

</style>

I hope this will solve some problems.

This entry no have comments... but you can be first.

Leave a Reply