IFRME was introduced in Microsoft Internet Explorer from version 5.5. Since then it has been used in many websites. Iframe used to fetch data/information from following sources:

  1. Contents of another file
  2. Contents of another page within same website
  3. Contents of another website
  4. Contents of one of the files of another website
  5. Contents of file that is in different format. Say PHP file on Rails or JSP file on PHP

Basic syntax of the IFRAME

< iframe src="myframe.php" >< /iframe >

IFRAME transparency

<iframe src="myframe.php" allowtransparency="true" >< /iframe>

Browsers default adds a background color to <iframe>, mostly it is white. To add a transparency to <iframe> we need to use additional properties to <iframe> and <body> within that iframe.

Add following line in myframe.php:

<body style="background: transparent">

Please note that if there is any background image in iframe then ‘background: transparent’ will remove the background image, background color and will make the iframe fully transparent. If you want to keep the background image but want to have transparency to iframe use following line:

<body style="background-color: transparent">

Above line will remove the background color of the iframe that was added by browser by default.

Question: I have above code in my pages but still iframe is not transparent! Why?

Answer: Above code will definitely makes the iframe transparent. But developers who do not conscious about the sequence and preferences of the HTML tags, that it supposed to render, puts their code at the top of the page.

Each page should start with declaring the DOCTYPE and html at the top of the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Even though the DOCTYPE and html is declared at the top of the page some times iframe doesn’t get the transparency. Then you need to check the ‘lang’ attribute that is used in <html> tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

Most of the CMS based websites which uses multilingual behavior, adds language related function in <html> tag, which prevents the transparency of the iframe. To overcome this define your preferred language for the page:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">

By doing this your iframe will have transparency works in all modern browsers including IE7/8/9