iframe go transparent?!

[Riko]

like i want the words n everything, but i don't want a background at all for the iframe cause I want the background from index there instead.. could I do that?!

[Ferox]

No, An Iframe cannot be made transparent for the following reasons:

Firstly, It is not "on top" of the index or anything below, it is INPLACE so even if you could make it transparent the background would not be behind it.

Secondly, An iFrame is like a portal to view another URL and not a set of text or images on its own.

The only way to change this is to go into the URL the frame links to and change its' background.

[razvanioan]

Hey, it can be done !

You have to resolve 2 (two) things:

First, in the main page, where you have the <iframe> tag, add this simple attribute:

allowtransparency="true"

Example:

<iframe name="info" src="main.html" width="561" height="479" scrolling="auto" align="top" frameborder="0" marginwidth="0"
marginheight="0" allowtransparency="true">
// some code for browsers who are not able to view the <iframe> tag
</iframe>

Second, you have to put the transparency to the pages that should load into the <iframe>, with CSS like this:

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

It really works

[curtiss]

Could you give us a link, so we can see what you've done?

[razvanioan]

Hallo there !

I am working at a project right now, and I wanted this transparent background for an <iframe> tag, which is included in a <div> layer. When I was looking for an answer to this problem, I have found your thread, and I couldn't believe what Ferox has said: that it is imposible, and I have looked forward, and I have found the answer. So, now, I have published the project I am working at, for you to see what I have explained above, but you can see only in the first main page that loads, in the submenus I haven't implemented it yet, and I am looking for an answer for Opera browsers too. The address is : http://www.heveco.ro/razvan/webdesign/relmo/index.html

Flash rullez

[Outwit]

yep it works great thanx. But did you find a solution to netscape and other browsers that dont support i frames ?

[Till]

Originally posted by Outwit
yep it works great thanx. But did you find a solution to netscape and other browsers that dont support i frames ?

I think the <layer> tag can handle that.

For example:

<iframe ...>
<layer ...></layer>
</iframe>

[\Kritikal\]

The stuttering on Firefox is horrific. I have a better solution that works with all browsers:

Create a div with the dimensions you want and in it's style set overflow: auto, this will allow the div to be scrollable. And, because it is part of the parent document, it will inherit the properties of its parent.

[Outwit]

Ok I did what you said and it works to. Just use overflow="auto" and i get the same result as with an Iframe. Now I have to deside what methode is better .
But Wen I had the Iframe I showed my site to a friend who had a mozilla browser and he said the iframe did work. Don't know how netscape handels it or other browsers.

[lala]

I had a hell of a time finding a good answer to this, and sort of lucked into a solution.

The solution is this:

1. First Give your Iframe the allowtransparency="true" tag.
2. Make sure the source page's content has NO background color specified... not in the page itself, and not in any stylesheet linked to the page! This will make the body color pure white.
3. Add this to your iframe tag:
style=filter: chroma(color="#FFFFFF");

Step 1 and 2 makes the iframe transparent in netscape/mozilla/firefox. As long as the page has no other background specified, the transparency works... but if you specify a background color, the transparency is lost.

Step 3 makes it work in Internet explorer, IE's filter:chroma nukes the white background. That means you must make sure no other part of your page (or at least nothing in that iframe) has pure white, or it will be made invisible. That's pretty easy, if something is even slightly differently colored (for example #FFFFFD) then it won't be transparent.

So the example code:

<IFRAME src="anything.htm" frameborder="No" style="FILTER: chroma(color=#FFFFFF)" allowtransparency="true">
</IFRAME>

And "anything.htm" must not have any bgcolor specified in its body tag, or in a style section, or in any CSS that it's linked to.

Hope this was helpful to someone.

[iansmith]

I use the method discribed here with IE and Moz; but have not found a need for the filter. But have you made transparency work in Opera?

[seccondbest]

go here and see how it is working.

www.slk-trading.nl

if this is what you want than i might be able to help you out.

[iansmith]

But in Opera the iframes are still not transparent for me; are they for you? I just see a large white oblong where the iframes are. The scroll bars etc work but the background is obscured.

[seccondbest]

Ok i just downloaded the free trial version of Opera.
Why people would want to pay for a web browser i dont know but ok for this purpose i downloaded it.

I have I-frames in my I-frames and it seems that all the secundairy I-frames work.
Just the first one ( the one that should show the back ground does not).
I guess it is back to the drawwing board to figure this out, since i only use IE i didnt know my webpage looked like this on other browsers.

sorry about that my bad.

[bg4m3r]

heh, I've been looking for a solution to this problem for a while now! I've implemented the last shown method, and the results are perfect, in IE at least. Go to ptplus.us.tt and go either of the themes pages to see the result! Thanks guys!

Also, I added a layer tag to 'fill-in' for the iframe on browsers that don't support iframes so if you know your browser doesn't support iframes, check it out and let me know if you could view the screenshots of the themes! thanks!