How do I change what div overlaps?

**Foppa** · 10-19-2009, 03:42 AM

I have some navigation images overlapping my body background image, but would like the background image to overlap the navigation images instead.

Is it possible to change?

The navigation images are only overlapping the very top of the background image, so it's not like the background image is the page's entire background.

Below is a screen shot of how it currently looks, but I want he white part on top:

**chrishirst** · 10-19-2009, 04:22 AM

if the "background" overlaps the navigation;

A. It won't be a background.

B. The navigation won't be "clickable" any more.

Now, do we get to see the entire page? because images (or part of them) are impossible to use for debugging CSS & HTML "issues".

**Foppa** · 10-19-2009, 05:06 AM

It's not live yet, but below is my code:

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Utah SEO Company - Search Engine Optimization - </title>
</head>

<body>
<div id="logo">
    <a href=""><img src="images/logo.png"></a>
</div>
</div>
<div id="nav">
        <a href=""><img src="images/tab-new.png" alt="" /></a>
        <a href=""><img src="images/tab-new.png" alt="" /></a>
        <a href=""><img src="images/tab-new.png" alt="" /></a>
        <a href=""><img src="images/tab-new.png" alt="" /></a>
</div>
<div id="container">
    <div id="content">
        <div id="left">
            <h1>Utah SEO Company</h1>
            
    <p> </p>
            
            
            <h1>Services</h1>
            <div id="photos">
            <a href=""><img src="images/" alt="" /></a>
            <a href=""><img src="images/" alt="" /></a>
            <a href=""><img src="images/" alt="" /></a>
            </div>
        </div>
        <div id="right">
            <img src="images/form2.gif" />
        </div>
    </div>
    
    <div id="footer">Copyright © 2009 - www.DreamPageMedia.com</div>    
</div>
</body>
</html>

CSS:

Code:

body {
    background-image:url(images/bg-3.png);
    background-repeat:repeat-x;
    color:#000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    margin: 0px;
}
a{
    font-size:12px;
}
p{
    margin: 15px 0px;
}
#logo {
    margin: 30px 0px -25px 240px;
}
/********************* Navigation ********************************/
#nav {
    margin-left: 421px;
}
/********************** Content ***************************/
#container {
    background: url(images/content-bg.png) no-repeat;
    margin: auto;
    text-align: left;
    width: 978px;
    margin-top: -33px;
}
#content {
    width:978px;
    height: 787px;
    line-height:1.5;
}
img{
    border-width:0px;
}
h1{
    color:#165788;
    font-size:16px;
    margin: 20px 0px 20px 0px;
}

h2{
    color:#85a157;
    font-size:14px;
    margin: 10px 0px 15px 0px;
}
#left {
    float:left;
    width:620px;
    margin-left:35px;
    padding: 30px 10px 30px 0px;
    display:inline;
}
#left a{color:#28556b;}
#left a:hover{color:#c77e0c;}
#photos a{
    margin-right:80px;
}
#right {
    float:right;
    width:245px;
    padding: 30px 10px 30px 0px;
    margin-top:15px;
    margin-right: 32px;
}
/********************** Footer ***************************/
#footer {
    background: #175787;
    width:968px;
    height: 28px;
    text-align:center;
    font-size: 10px;
    line-height: 2.6em;
    clear:both;
    color: #ffffff;
}