Image position on HTML with CSS and z-index

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;
}

MJ Pieterse

Junior Poster

145 posts since Mar 2009

Reputation Points: 13

Solved Threads: 18

1 Year Ago

Show Comments

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;
}

Zero13

Practically a Master Poster

624 posts since Jan 2009

Reputation Points: 120

Solved Threads: 139