All geek questions in one place

How to make a fullscreen iframe with an opaque background?

I can create an iframe that takes up the whole screen. But I can not make the contents of the background hidden. In other words, I want the iframe to be opaque. I am currently trying to do the following:

<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 something wrong here?

UPDATE: I passed BGCOLOR = "#FFFFFF" to the body of main.html, now it works fine. Thanks for your details!

+4
source share
4 answers

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 do not need to set allowtransparency = false as this is the default value. There were also some bugs with extra quotes. In addition, I corrected the spelling of the name attribute.

I changed the width to 100% instead of the fixed width of 400 pixels to make sure that it fills the whole window.

+8
source

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

+1
source 
 allowtransparency = 'false'

Don't you think it's a good start?

Try setting allowtransparency = 'true'

And then make sure the content inside the iframe has transparency, transparency.

0
source

Fullscreen iFrame you will need to add margin: auto; to your styles.

0
source

Source: https://habr.com/ru/post/1298999/

More articles:


All Articles