Transparent Iframe Body

Question

I need to have a (crossdomain) iframe with dynamic width and height.

My question is, Can I create an iframe with 100% size and a transparent background that will show the parent of this iframe, behind it ?

Can I attach a css property or a transparent gif for the iframe background to make that effect ?

Thanks.

Alisa

Accept theatomicdude's answer – Pintle

Answer 1

yes you can (if i understand your question correctly)

heres the code if you have edit access to the iframe content put this in the head (of the iframe)

<style type="text/css">
 <!-- BODY {background:none transparent;}-->
 </style>

and then embed the iframe like this

<iframe src="frame.htm" allowtransparency="true">

Amherst

Thanks!, glad I could help but an up vote will do, too young for beer anyway haha – Amherst

One note - the transparent iframe will not pass clicks through to the parent window, so users might get confused by elements on the page that they can see but not click. – Bunns

Oh, I didn't know that the clicks wouldn't pass through. Thanks for the info! – Amherst

@atomthegod but snacks tho – Orange

the given link is broken. – Apopemptic

thanks for this! your answer should get accepted! though this appears to work without allowtransparency="true". Is there a reason you included this part? – Revoice

looks like allowTransparency is not longer supported. Check this answer – Belch

Answer 2

In modern browsers, the issue is the meta tag for color-scheme (reference: https://fvsch.com/transparent-iframes)

If the color scheme of an iframe differs from embedding document, iframe gets an opaque canvas background appropriate to its color scheme.

So the way that I fixed this issue was by adding the color-scheme meta in my iframe

<meta name="color-scheme" content="light dark">

Belch

Answer 3

By inspecting the iframe page you might find out there is color on some parts of the page. My suggestion would be to start from the highest component when adding the transparency:

html {
  background-color: transparent !important;
}

And then in the iframe element:

<iframe src="www.." allowtransparency="true">

Bharal

it seems to work without allowtransparency="true". is there a reason you included this part? thanks for helping! – Revoice

Answer 4

This isn't tested, but iframes (any element) should have a default background of being transparent.

If that's not true, you can set them to being transparent in CSS background: transparent

If that doesn't work, you can use CSS opacity filters:
http://www.w3schools.com/Css/css_image_transparency.asp

Madian