Forum Moderators: open

Message Too Old, No Replies

iframes and transparency

         

xosweetdesireox

12:34 am on Jun 15, 2005 (gmt 0)

10+ Year Member



Okay, i'm new to this whole iframes thing. I've gone though many tutorials on making it transparent, but I just can't get it. If anyone can help me, here is the code..

<html>
<head>

<title>Welcome!</title>

<body>
<style type="text/css">
<!--BODY {background:none; transparent}
color:#000000;
font-size:8pt;
font-family:verdana;
font-weight:normal;
background-image: url(BACKGROUND.gif);
background-color: #ffffff;
background-attachment : fixed;
}-->
<!--

BODY{scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000; scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #000000; scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color:#000000}
} -->
<!--
A{cursor:crosshair;color:#000000;text-decoration:none; font-weight:bold; }
A:visited{color:#000000; text-decoration:none; font-weight:bold; cursor:crosshair; }
A:active {color:#000000; text-decoration:none; font-weight:bold; cursor:crosshair; }
A:hover {color:#000000; text-decoration:none; font-weight:bold; cursor:crosshair; }
}-->
<!--ul
{
list-style-image: url(BULLETPOINT.gif);
margin-top: 0;

} -->
<!--input,textarea{color:#000000;font-size:8PT;font-family:verdana;background:#FFFFFF;border:1PT solid #000000;}
} -->
</style>

<center><img src="http://example.com/img187/1622/websitelayout29ph.png" style="position:absolute; top:0; left:0;">
<div style="position:absolute; top:115; left:194">
<iframe src="http://www.example.com/MAIN.htm" name="MAIN"
background-color="transparent" width="385" height="365" frameborder="0">
allowtransparency="true"
</iframe></div>

<div style="position:absolute; top:21; left:13">
<iframe src="http://www.example.com/LEFT.htm" name="LEFT"
background-color="transparent" width="148" height="488" frameborder="0">
allowtransparency="true"
</iframe></div>

<div style="position:absolute; top:21; left:607">
<iframe src="http://www.example.com/RIGHT.htm" name="RIGHT"
background-color="transparent" width="148" height="488" frameborder="0">
allowtransparency="true"
</iframe></div>

</head>
</body>
</html>

[edited by: tedster at 2:06 am (utc) on June 15, 2005]
[edit reason] use example.com in code [/edit]

tedster

2:11 am on Jun 15, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hello, and welcome to the forums. The missing piece for you seems to be that style="background-color:transparent;" needs to be in the body tag of the page that appears within the iframe. You've been adding it to the containing div, but that doesn't change the transparency of the iframed pages - the one that is referenced by the src= attribute.

So it's MAIN.htm, LEFT.htm and RIGHT.htm that need to have <body style="background-color:transparent;">

xosweetdesireox

11:19 am on Jun 15, 2005 (gmt 0)

10+ Year Member



Thank you. Right now, i'm trying to put it in, I can't. Ah, its confusing me. Its in the body tag in the RIGHT.htm, LEFT.htm, and MAIN.htm

tedster

2:36 pm on Jun 15, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



http://www.webmasterworld.com/help.cgi?cat=tos

Right - if the iframe is to appear transparent, then the document that's loaded into that iframe must have a transparent background.