How To Make The Iframe Background Transparent In Internet Explorer?
Iframes are an integral part of today's web development. They were earlier, they are now and they will remain in the future. ALthough you might have known that displaying your content inside Iframes may not be a sweet deal for search engines like Google or Bing when they crawl your website but Iframes are making all those Like buttons, and Twitter follower buttons possible on any website.
Transparent iframe in IE
However, while using Iframes on IE8 there is a small issue that you might encounter at times - the background transparency problem. So when you load an iframe on your page you might notice that there is a white background inside the frame which you might want to get rid of at times.
So, here is how you remove white background from an Iframe in IE and make it transparent
Two ways to do it, fully css or using css and javascript.
Using CSS
1. First you have put the following style in the body tag of the page that you will call inside the iframe:
style="background: transparent"
So now it becomes something like this
<body style="background: transparent">
2. Next, add the following property to the Iframe:
allowTransparency="true"
So now it becomes something like this
<iframe id="Frame" src="abc.html" allowTransparency="true">
Using Javascript
Step 1 from above remains true for this case too. In order to set the allowTransparency property of thr iframe to true all you need to do is this:
document.getElementById("Frame").allowTransparency = "true";
Please let us know if this helped.