I am using transparent iframes and now I can't get my main background image to work. Here is my code:


index.php

<? include("http://www.darkangelic.net/header.php") ?>

<div style="position: absolute; width: 836px; height: 51px; z-index: 3; left: 86px; top: 132px" id="layer1">
<img border="0" src="http://www.darkangelic.net/images/button1.gif" width="100" height="50" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"><img border="0" src="http://www.darkangelic.net/images/button2.gif" width="100" height="50" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"><img border="0" src="http://www.darkangelic.net/images/button3.gif" width="100" height="50" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"><img border="0" src="http://www.darkangelic.net/images/button4.gif" width="100" height="50" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"><img border="0" src="http://www.darkangelic.net/images/button5.gif" width="100" height="50" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"><img border="0" src="http://www.darkangelic.net/images/button6.gif" width="100" height="50" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"><img border="0" src="http://www.darkangelic.net/images/button7.gif" width="100" height="50" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"><img border="0" src="http://www.darkangelic.net/images/button8.gif" width="100" height="50" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"><p>&nbsp;</div>
<img src="http://www.darkangelic.net/images/layout.gif" width="803" height="1515">
<div style="position: absolute; width: 100px; height: 100px; z-index: 2; left: 282px; top: 235px" id="iframe">
<iframe name="main" width="604" height="1271" frameborder="0" scrolling="no" allowtransparency src="main.php" allowtransparency="true" background-color="transparent">

Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe></div>

<div style="position: absolute; width: 152px; height: 103px; z-index: 1; left: 115px; top: 228px" id="login" onMouseover="bindsound('A', soundfile, this)">
<IMG NAME="IMAGE01" SRC="off.gif">
<A HREF="http://www.darkangelic.net/test.php" target="main" onMouseOver="imgover(IMAGE01)" onMouseOut="imgout(IMAGE01)">Test</A>

<div style="position: absolute; width: 149px; height: 143px; z-index: 1; left: 1px; top: 165px" id="navegation">
<div style="position: absolute; width: 142px; height: 322px; z-index: 1; left: 2px; top: 204px" id="tagboard">
<div style="position: absolute; width: 148px; height: 250px; z-index: 1; left: -2px; top: 371px" id="plugboard">
<div style="position: absolute; width: 151px; height: 101px; z-index: 1; left: -2px; top: 292px" id="sitestats">
<div style="position: absolute; width: 151px; height: 109px; z-index: 1; left: 1px; top: 140px" id="linkme">
&nbsp;</div>
<p>&nbsp;</div>
<p>&nbsp;</div>
&nbsp;</div>
&nbsp;</div>
&nbsp;</div>

<? include("http://www.darkangelic.net/footer.php") ?>

style.css

A:link
{ text-decoration: none; font-weight: none; color:#33cccc; }
A:visited
{ text-decoration: none; font-weight: none; color:#33cccc; }
A:active
{ text-decoration: none; font-weight: none; color:#33cccc; }
A:hover
{ text-decoration: blink; font-weight: none; color:#fe78b1;

cursor:url("cursor.ani"); }

h1 {font-family: Tahoma;
color: #33cccc; }

p {font-family: Tahoma;
color: #33cccc; }

body, html
{ background: ;
font-family: Tahoma;
color: #33cccc;
letter-spacing: 0pt;
font-weight: none;
font-size: 11;
text-align:center;
cursor:url("cursor.ani");
z-index: 1;
scrollbar-face-color: #fe78b1;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #ffff33;
scrollbar-darkshadow-color: #ffff33;
scrollbar-shadow-color: #33ccff;
scrollbar-arrow-color: #ffff33;
scrollbar-track-color: #33ccff;

}

td, xmp
{ font-family: Tahoma;
color: #33cccc;
letter-spacing: 0pt;
font-weight: none;
font-size: 11;
cursor:url("cursor.ani");
text-align:center;}


input, textarea
{ background: #33cccc;
font-family: Tahoma;
color: #ffff33;
letter-spacing: 0pt;
cursor:url("cursor.ani");
font-weight: none;
font-size: 11;
border-style: solid;
border-color: #ffff33;
border-width: 1px; }

there does not seem to be any background applied...

{ background: ;

we will need to see your page and have you explain exactly what image is not appearing please.
thanks.

My site is http://www.darkangelic.net

The space outside of the layout is where I want to use my background image.

i see pink with yellow stars as the background.
did you fix the problem?