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">&nbsp;</td>
        <td class="top">&nbsp;</td>
        <td width="49px" class="righttopcorner">&nbsp;</td>
      </tr>
      <tr>
        <td class="left">&nbsp;</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">&nbsp;</div>
                   </td>
                   <td width="40%">
            	     <div id="biographyphoto"></div>
                   </td>
               </tr>
            </table>
        </td>
        <td class="right">&nbsp;</td>
      </tr>
      <tr>
        <td height="48px" class="leftbottomcorner">&nbsp;</td>
        <td class="bottom">&nbsp;</td>
        <td class="rightbottomcorner">&nbsp;</td>
      </tr>
      <tr>
        <td class="solidbottom">&nbsp;</td>
        <td class="solidbottom">
            <div id="footernote">
                <p>&nbsp;</p>
            </div>
        </td>
        <td class="solidbottom">&nbsp;</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;
}

Add 'position: relative' and 'z-index' property to the table cell greater than 'biographyphoto' z-index property. The example below has 10 for table cell 'z-index'.

#maintable td {
	position: relative;
	z-index: 10;
}

OMW!! hahahahaha!!!! that is perfect!!! thank you soooo much!!!

I dub myself an idiot and you a genius!!!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.