How to make a fullscreen iframe with opaque background?

Question

I am able to create an iframe which occupies entire screen. But I am not able to make the contents of the background hidden, In other words, I want an iframe which is opaque. I am currently trying like this:

   <iframe name='myifrmae' allowtransparency = 'false' background= '#FFFFFF' id = 'myiframe' src = 'main.html' style='position:absolute;top:0px;left:0px;width:400px;height:100%;z-index:999' onload = 'sendParams();'' frameborder='no'></iframe>

I am testing this on Firefox/3.5.6.

Am I doing anything wrong here?

UPDATE: I gave a BGCOLOR = "#FFFFFF" to main.html body, Now it is working fine. Thanks for your inputs!

Answer 1

Why not use an opaque div with an iframe in it?

Answer 2

allowtransparency = 'false'

Doesn't sound like a very good start?

Try setting allowtransparency = 'true'

And then make sure that the content inside the iframe has it's opacity set to be transparent.

Answer 3

Full screen iFrame you would need to add margin:auto; to your styles.

Answer 4

Try:

<iframe name='myiframe' id='myiframe' src='main.html' style='position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:999' onload='sendParams();' frameborder='no'></iframe>

You don't need to set allowtransparency=false as this is the default. Also there were a few errors with extra quotes. Also I've corrected the spelling the name attribute.

I've changed the width to be 100% instead of the fixed width of 400 pixels to make sure that it fills the entire window.