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!

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!

• javascript
• ajax
• xhtml
• html

• I think the code you tried to post has mysteriously vanished. – Eric Mickelsen Commented Jan 21, 2010 at 13:46
• Its back now! I forgot add code block. – Manohar Commented Jan 21, 2010 at 14:03

4 Answers 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.

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

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.

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