There is no attribute "allowtransparency"

There's a way you can do this with jQuery if you have included the jQuery file - 

<!--[if lt IE 9]><script> $(".classname").attr("allowTransparency", "true"); </script><![endif]-->

Change .classname to that of your iframe or make one if there isn't one. (Take out the attribute from the iframe as well) Put that straight after the iframe closing tag and it adds in the required allowTransparency tag for browsers prior to IE9. As it is within the IE conditional statement, it is not read by the W3C validator. It also eliminates cross browser compatibility and content hiding issues with adding all the CSS that people have already mentioned, if you're using the latest jQuery version anyway. The allowTransparency attribute was created with a clearly defined purpose, so there's no point trying to recreate it with CSS when you can just silently insert it. Hope this helps someone!

(This method assumes you already haveiframe {background-color:transparent}which doesn't work on older IE versions)


While it's true that the W3C's HTML spec does not define it, there is an allowTransparency attribute, and it is supported by all modern browsers (and Internet Explorer). As HTML5 has taught us, the cart is supposed to be before the horse.

Suppose you have this HTML on your main page, index.html:

<html>
    <body>
        <iframe src="source.html" 
                allowTransparency="true" 
                style="background-color:lightgreen;" 
                width="400" height="200">
        </iframe>
    </body>
</html>

And your source.html looks like this:

<html>
    <body>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, magna
           id bibendum sollicitudin, tellus tortor consequat enim, et mollis mauris 
           augue et dui. </p>
    </body>
</html>

When you open the main page (index.html) in your browser, you will see the text from source.html in an iframe, but it will have a light green background.

(Tested with Safari, Firefox, and Chrome on Mac OS X and Internet Explorer 8 and Chrome on Windows XP)

Edit: The key is this: The source page cannot set its own background. If it does, it ignores the transparent background.

Update: Just tested this (March 2019) using Safari 12, Chrome 73, and Firefox 65 on macOS High Sierra, and it still works.


I'm not sure what you're trying to do here, but this should be what you are looking for: 

iframe {
    background-color: transparent;
}

This is, of course, assuming that you want the background to the iframe be transparent.

Tags:

Html

Css

W3C

W3C Validation

Recent Posts