How to make an IFrame transparent?

Sachit · #1 13-02-2009

Hi everybody,

I have a built an web site where there is some information stuffs in the background that I want people to see. The problem is, I want to use an IFrame for the content. This IFrame will appear in front of what I want people to see. How can I get the IFrame to be, "transparent," so people can see whats behind it, but also see the text??? I know it's complicated.

Santanio · #2 13-02-2009

I am not sure that it is possible (i may be wrong) but as far as i know iframes load a separate webpage, your best bet is to set the background color/image in the Inline Frame. Measure out how much of your background image with the I frame is covering cut it out of the pic you are using as the background and make a new image by puting it centered into the background of the page that loads in the Iframe. if you are just using a color........ change the color of the background for the page you are loading in the Iframe.

Shell · #3 13-02-2009

The correct way to make an iFrame transparent is to set a special attribute for the iFrame element then making the second document?s body transparent using CSS. The iFrame attribute is allowtransparency. If it?s set to be true, the iFrame will be transparent, else will be a static color, white by default.

Let?s see an example. First, we have to make the document we want to mirror transparent. This can be achieved with CSS, by putting the following code in the head section of the document:

Code:

<style type="text/css" media="all">
body {
background-color: transparent;
}
<style>

Now in the document you want the iFrame to appear, create an iFrame and make sure the allowtransparency=?true? attribute is set. Like this:

Code:

<iframe src="seconddocument.html" allowtransparency="true" >
</iframe>

PARRISH · #4 13-02-2009

To make a frame transparent, you have to:

Add

ALLOWTRANSPARENCY="true" to the IFRAME element tag.

Add
STYLE="background-color:transparent" to the BODY tag of <fileName> that is being sourced in the IFRAME tag (SRC=<fileName>).

Here is the code to implement the example above:

Code:

<IFRAME NAME="Frame1" SRC="010209d.html" 
ALLOWTRANSPARENCY="true" STYLE="position:absolute; top:20; left:50; z-index:3">

And the BODY tag of 010209d.html is:

<BODY STYLE="background-color:transparent">

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads for: "How to make an IFrame transparent?"
Thread	Thread Starter	Forum	Replies	Last Post
How To Make Image Transparent in GIMP?	Landry	Customize Desktop	6	22-08-2011 01:20 PM
How to make bmp image transparent	SMG	Windows Software	7	27-08-2010 05:17 PM
How to make Windows XP taskbar Transparent ?	Demi	Customize Desktop	3	25-06-2009 11:30 PM
How to make a transparent form in VB 6.0	CheckMeNot	Software Development	2	24-12-2008 02:27 PM
How to make transparent buttons in C#	AmdUser	Software Development	5	01-12-2008 01:08 PM