Div transparent background when having an iframe in it?

Question

Hello,

I have a page that holds an iframe:

<div style="position:absolute; width:80%; top:100px; left:10%; z-index:5;">
    <iframe src="www.google.com" />
</div>

Note that the source of the iframe can be from another domain, so I can't change the html in it.

In addition to this ifame I have a menu and some decoration image at the bottom:

<div id="menu" style="position:absolute; width:100%; top:0px; left:0px; z-index:100;">
    ...
</div>

<div id="footer" style="position:absolute; width:100%; bottom:0px; left:0px; z-index:0;">
    ...
</div>

As you can see, I gave z-index to each div, so it should be displayed in that order: the menu on the top, followed by the div with the iframe and at the end the footer image.

What I want is that the iframe (and the div holds it) to have no background (transparent bg color if you like), so the background and the footer image behind it will be visible. Note that I want to change only background color; the text must not change or get opacity.

I managed to get to the bg image and change it (with jquery):

if ($.browser.msie == false) {
    $(document.getElementById("content").contentDocument.body).
                        css('background', "url('transparent.png')");
}
else {
    $(document.getElementById("content").Document.body).
                        css('background', "url('transparent.png')");
}

It works greate on the iframe, but the div that holds it somehow gets a white background.

It won't change if I set the background of the div to this 'transparent.png' image; the div will still save its white background!

If I replace the div with a table, the iframe goes behind the footer image (although it has z-index bigger).

All I want is just to see the footer image behind that iframe...

Please help, I'm quite hopeless... : (

Answer 1

I tested this and was not able to duplicate the problem. Here's my primary html:

<div style="background:red;">
<div>
    <iframe src="test2.html" />
</div>
</div>

And here's test2.html:

this is a test file

This displays "this is a test file" in an iframe with a red background behind the iframe. Can you post some code to clarify your problem?

Answer 2

did you try transparent background to the div and that semitransparent background image to the iframe?

Answer 3

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>