Iframe Background Transparent in IE

If a div contains an iframe, the div’s background image will be blocked by it’s child element “iframe”.So we have to let the iframe transparent so that the div can display its background iamge. But this doesn’t work in IE.

Waht we can do is that:

Add allowTransparency="true" to your iframe as attribute:

For transparentBody.htm add backgorund:transparent to it’s body tag.


The following example shows 4 ways to use the allowTransparency attribute, with and without the background-color attribute.

  1. Frame1 renders red, the background color of the parent document, because the allowTransparency attribute of Frame1 is set to true
  2. Frame2 renders green, the allowTransparency attribute of Frame2 is also set to true, however the background-color attribute of Frame2 is set to green
  3. Frame3 renders white, the color of the t:SRC document, because the allowTransparency attribute of Frame3 is set to false (the default value)
  4. Frame4 renders white even though the background-color attribute of Frame4 is set to green, the allowTransparency attribute of Frame4 is also set to false

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/allowTransparency.htm

One thought on “Iframe Background Transparent in IE

  1. I like the helpful info you provide in your articles.
    I will bookmark your weblog and check again here regularly.
    I’m quite certain I will learn plenty of new
    stuff right here! Good luck for the next!

Leave a Reply

Your email address will not be published. Required fields are marked *