Printable View
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.
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.
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:
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:<style type="text/css" media="all">
body {
background-color: transparent;
}
<style>
Code:<iframe src="seconddocument.html" allowtransparency="true" >
</iframe>
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:
And the BODY tag of 010209d.html is:Code:<IFRAME NAME="Frame1" SRC="010209d.html"
ALLOWTRANSPARENCY="true" STYLE="position:absolute; top:20; left:50; z-index:3">
<BODY STYLE="background-color:transparent">