61

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.

user345311
  • 621
  • 1
  • 5
  • 5

3 Answers3

125

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">
Atom Vayalinkal
  • 2,642
  • 7
  • 29
  • 37
2

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">
Paul Roub
  • 36,322
  • 27
  • 84
  • 93
Patrik Rikama-Hinnenberg
  • 1,362
  • 1
  • 16
  • 27
  • 3
    it seems to work without `allowtransparency="true"`. is there a reason you included this part? thanks for helping! – Crashalot Jan 15 '20 at 08:32
-1

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

Kerry Jones
  • 21,806
  • 12
  • 62
  • 89