Transparent Iframe Body

making the iframe transparent

You can't style iframes from the outside. Unless the content inside the iframe have no background color, you are out of luck. If it's inside your own domain, you may set the background transparent if it's being called from inside an iframe (in your iframe head):

<script type="text/javascript">
 if (window!= window.top) { // inside iframe
   document.body.style.backgroundColor = 'transparent';
   // or document.body.style.background = 'none';
 }
</script>

Html/Css Transparent iframe

use body tag instead of html tag and out a space between transparent and !important

body {
    background: transparent !important;
}

hope it helps

This iframe refuses to be transparent

In mobile.css on line 85, I see this:

.ui-body-d, .ui-overlay-d {
    background: linear-gradient(#FFFFFF, #FFFFFF) repeat scroll 0 0 #FFFFFF;
    border: 1px solid #BBBBBB;
    color: #333333;
    text-shadow: 0 1px 0 #FFFFFF;
}

Removing the background from this definition made the popup's background transparent.

You may want to add some background color to interior elements of the table so that the actual content area is not transparent.

You may also want to remove or override the box-shadow as the shadow appears square (not rounded corners):

.ui-overlay-shadow {
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
}

Iframe transparency issue

how about allowTransparency="true" ?
Since you do want it to be transparent?

It would also help to set background-color:transparent on the iframe, and to make sure that the page you load into the iframe does not define a background color in its body.

Div transparent background when having an iframe in it?

Try:

background: transparent url('transparent.png');

One thing to note, IE6 does not support alpha transparencies for PNGs. You'll want to have an IE specific stylesheet and use an IE only hack for this.

---

Just to clearify, you arn't trying to get rid of the background color within the iframe itself, but just be able to see the footer and header correct? If this is the case, this should work with an HTML4.01 doctype.

<div style="position:absolute; width:80%; top:100px; left:10%; z-index:5;">
    <iframe style="background-color: transparent;" src="testframe.html" allowtransparency="true"></iframe>
</div>

---

Related Topics