I really hope someone can help me. this is mind boggling and driving me crazy!
I'm busy with a site design and have a div with a background image on the page, that in essence falls inside a table that is on the master page. I've been trying to adjust the image to be behind the table image with z-index but no such luck to get it to work... any ideas??
I've cleanded up the coding so that you don't see stuff that is not relevant to you so basically it is just the table and div that you will see... etc.
here is my HTML
<table id="maintable">
<tr>
<td width="49px" height="49px" class="lefttopcorner"> </td>
<td class="top"> </td>
<td width="49px" class="righttopcorner"> </td>
</tr>
<tr>
<td class="left"> </td>
<td>
<table class="blanktable">
<tr>
<td width="50%" align="left">
<div id="logo"></div>
</td>
<td width="50%" align="right">
<div id="albumname"></div>
</td>
</tr>
</table>
<table class="blanktable" style="position:relative; z-index:5">
<tr>
<td valign="top" style="padding-left:15px" width="60%">
<div class="contentdiv"> </div>
</td>
<td width="40%">
<div id="biographyphoto"></div>
</td>
</tr>
</table>
</td>
<td class="right"> </td>
</tr>
<tr>
<td height="48px" class="leftbottomcorner"> </td>
<td class="bottom"> </td>
<td class="rightbottomcorner"> </td>
</tr>
<tr>
<td class="solidbottom"> </td>
<td class="solidbottom">
<div id="footernote">
<p> </p>
</div>
</td>
<td class="solidbottom"> </td>
</tr>
</table>and CSS
#maintable {
border:none;
border-collapse:collapse;
width:100%;
height:100%;
margin:0 auto;
position:relative;
z-index:10;
}
#maintable tr {
border:none;
border-collapse:collapse;
}
#maintable td {
border:none;
border-collapse:collapse;
text-align:center;
}
#maintable td.lefttopcorner {
background-image:url(../Images/lefttopcorner.gif);
background-repeat:no-repeat;
}
#maintable td.righttopcorner {
background-image:url(../Images/righttopcorner.gif);
background-repeat:no-repeat;
}
#maintable td.leftbottomcorner {
background-image:url(../Images/leftbottomcorner.gif);
background-repeat:no-repeat;
}
#maintable td.rightbottomcorner {
background-image:url(../Images/rightbottomcorner.gif);
background-repeat:no-repeat;
}
#maintable td.top {
background-image:url(../Images/Top.gif);
background-repeat:repeat-x;
}
#maintable td.bottom {
background-image:url(../Images/Bottom.gif);
background-repeat:repeat-x;
}
#maintable td.left {
background-image:url(../Images/Left.gif);
background-repeat:repeat-y;
}
#maintable td.right {
background-image:url(../Images/Right.gif);
background-repeat:repeat-y;
}
#maintable td.solidbottom {
background-color:#992c30;
}
#biographyphoto {
background-image:url(../Images/BiographyBackground.png);
background-repeat:no-repeat;
background-position:bottom;
float:right;
width:599px;
height:600px;
margin-bottom:-30px;
margin-right:-20px;
position:relative;
z-index:1;
}