Menu over background image

**angelopcs** · 03-30-2008, 11:27 AM

I can't get a menu to show up over a background image. I like use the code :
<div>
<img id="background" src="NewLrider.jpg" alt="" title="" />
</div>
to display the image, because it covers the whole page, grows, shrinks, etc.
But everything I've tried ends up under the background. I have a sample javascript menu I want to use, but even simple href items get overwritten?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"">
<html xmlns="" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Low Riders MC, LTD </title>
<meta name="Author" content="Angelo White" />
<meta name="Keywords" content="motorcycles, bikes" />
<meta name="Description" content="Low Riders Nashville" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<link rel="icon" href="../favicon.ico" type="image/ico" />
<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content {padding:5px 300px 20px 200px;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
#fixed {position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000;
padding:10px;}
</style>

<SCRIPT language=javascript>
// Courtesy of SimplytheBest.net -

</SCRIPT>
<script language="javascript">
// Courtesy of SimplytheBest.net -

</script>
<div>
<img id="background" src="NewLrider.jpg" alt="" title="" />
</div>
</head>
<body>
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
<tbody>
<tr>
<td bgcolor="#FFFFFF"><a onmouseout="off('image1');" onmouseover="on('image1');" href="<A href="http://planmagic.com/business_planning.html"><img">http://planmagic.com/business_planning.html"><img border="0" name="image1" src="images/image1_default.gif"></a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><a onmouseout="off('image2');" onmouseover="on('image2');" href="<A href="http://planmagic.com/marketing_planning.html"><img">http://planmagic.com/marketing_planning.html"><img border="0" name="image2" src="images/image2_default.gif"></a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><a onmouseout="off('image3');" onmouseover="on('image3');" href="<A href="http://planmagic.com/webquest.html"><img">http://planmagic.com/webquest.html"><img border="0" name="image3" src="images/image3_default.gif"></a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><a onmouseout="off('image4');" onmouseover="on('image4');" href="<A href="http://planmagic.com/financial_planning.html"><img">http://planmagic.com/financial_planning.html"><img border="0" name="image4" src="images/image4_default.gif"></a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><a onmouseout="off('image5');" onmouseover="on('image5');" href="<A href="http://planmagic.com/download.html"><img">http://planmagic.com/download.html"><img border="0" name="image5" src="images/image5_default.gif"></a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><a onmouseout="off('image6');" onmouseover="on('image6');" href="<A href="http://planmagic.com/register.html"><img">http://planmagic.com/register.html"><img border="0" name="image6" src="images/image6_default.gif"></a></td>
</tr>
</tbody>
</table>
</body>
</html>

**angelopcs** · 04-01-2008, 12:33 PM

I figured this problem out. I just had to add a line to the css style section in the header:
#content {padding:1px 50px 10px 10px; position:relative; z-index:1;}

Thanks for the responses, even though I couldn't figure out how to view them.