Otaqui.com Blog

Transparent IFrames in Internet Explorer using Javascript

In order to have an IFrame with a transparent background in Internet Explorer, you need to add an “allowtransparency” attribute, like so:

<iframe src="iframe_source.html" id="iframe_id" allowtransparency="true" />

However, if you want to set the transparency with Javascript via the DOM, you must camelCase the property:

document.getElementById('iframe_id').allowTransparency = true;

Note – you must also make sure that <body> tag in the document contained by the iframe is also transparent in order for the parent’s colours to show through.