[iframe] 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!

This question is related to iframe background transparent

The answer is


<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">

Why not just load the frame off screen or hidden and then display it once it has finished loading. You could show a loading icon in its place to begin with to give the user immediate feedback that it's loading.


Set the background color of the src to none and allow transparencey.

[WITHIN SCR PAGE STYLE]
<style type="text/css">
    body
    {
        background:none transparent;
    }
</style>

[IFRAME]
<iframe src="#" allowtransparency="true">Error, iFrame failed to load.</iframe>

NOTE: I code my CSS a little different to how everyone else does.


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.


Examples related to iframe

Getting all files in directory with ajax YouTube Autoplay not working Inserting the iframe into react component How to disable auto-play for local video in iframe iframe refuses to display iFrame onload JavaScript event YouTube iframe embed - full screen Change New Google Recaptcha (v2) Width load iframe in bootstrap modal Responsive iframe using Bootstrap

Examples related to background

SwiftUI - How do I change the background color of a View? Changing background color of selected item in recyclerview Android Studio Image Asset Launcher Icon Background Color Android: keep Service running when app is killed How to set a background image in Xcode using swift? CSS Background image not loading css transition opacity fade background how to set the background image fit to browser using html background:none vs background:transparent what is the difference? How to scale images to screen size in Pygame

Examples related to transparent

How to present a modal atop the current view in Swift How to make div background color transparent in CSS How can I make my website's background transparent without making the content (images & text) transparent too? Android Transparent TextView? PPT to PNG with transparent background Android WebView style background-color:transparent ignored on android 2.2 How to set transparent background for Image Button in code? Transparent background on winforms? How to have a transparent ImageButton: Android How do I create a transparent Activity on Android?