0

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;
}
2
Contributors
2
Replies
3
Views
6 Years
Discussion Span
Last Post by MJ Pieterse
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;
}
0

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

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.