Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Iframe transparent background

My app has a modal dialog with an iframe inside it. I've written my jQuery code such that when the dialog opens, it sets the appropriate 'src' attribute of the iframe so the content loads up. However, during the delay between the dialog opening and the content loading, the iframe appears conspicuously as a white box. I'd prefer the iframe have a transparent background.

I've tried setting allowtransparency="yes" on the iframe. Any ideas? Thanks!

like image 869
brianjcohen Avatar asked Aug 05 '09 15:08

brianjcohen


People also ask

How do I make an iframe background transparent?

The <iframe> tag is an inline frame. It is used to embed another HTML page within the current HTML page. A transparent iframe can be made by setting its background to transparent. And, the allowtransparency attribute of “iframe” is to be set as “true”.

How do I make background transparent in HTML?

Set background-color: transparent; and do not use opacity , as that is what makes semi-transparent the whole div.. I meant the that background-color should be semi transparent. In my example, the black background should be semi-transparent (according to opacity).

Why is iframe deprecated?

IFrames are not obsolete, but the reasons for using them are rare. Using IFrames to serve your own content creates a "wall" around accessing the content in that area. For crawlers like Google, It's not immediately clear that cotent in an iframe will be ranked as highly as if the content were simply part of the page.

What can I use instead of iframe?

Use the object Tag as an Alternative to Iframe in HTML We can use the tag to display another webpage in our webpage. The object tag is an alternative to the iframe tag in HTML. We can use the tag to embed different multimedia components like image, video, audio, etc.


2 Answers

I've used this creating an IFrame through Javascript and it worked for me:

// IFrame points to the IFrame element, obviously IFrame.src = 'about: blank'; IFrame.style.backgroundColor = "transparent"; IFrame.frameBorder = "0"; IFrame.allowTransparency="true"; 

Not sure if it makes any difference, but I set those properties before adding the IFrame to the DOM. After adding it to the DOM, I set its src to the real URL.

like image 114
Daniel Magliola Avatar answered Oct 14 '22 14:10

Daniel Magliola


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

that might work (if you put in the iframe) along with

<iframe src="stuff.htm" allowtransparency="true"> 
like image 27
Atom Vayalinkal Avatar answered Oct 14 '22 13:10

Atom Vayalinkal