CSS Forum

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

**Foppa** · 11-30-2009, 07:40 AM

I got it how I want it now, but since the navigation is technically the background, since it's being overlapped, the links won't work in Firefox. They do a bit in IE, but only in a small area.

Any way to correct this?

Code:

#nav {
    margin-left: 502px;
    position: relative;
    z-index: -1;
}

Code:

<div id="nav">
        <a href="seo-services.html"><img src="images/services.png" alt="photo" /></a>
        <a href="seo-faqs.html"><img src="images/seo-faqs.png" alt="photo" /></a>
        <a href="seo-blog.html"><img src="images/seo-blog.png" alt="photo" /></a>
        <a href="contact.html"><img src="images/contact.png" alt="photo" /></a>
</div>

**chrishirst** · 11-30-2009, 07:44 AM

DON'T have them in the background!!!!!!!

**Foppa** · 11-30-2009, 04:01 PM

Quote:

Originally Posted by chrishirst

DON'T have them in the background!!!!!!!

That's the only way I can get it to look the way I want it to look.

**chrishirst** · 11-30-2009, 04:26 PM

There is rarely only ONE way to accomplish anything with CSS layouts.

**Foppa** · 11-30-2009, 04:28 PM

I agree, but unfortunately that's the only way I know how to do it with my limited skills.

**chrishirst** · 11-30-2009, 04:36 PM

Ok, to be of any help, we really need the page on-line (with images) somewhere, even on a freebie host such as http://www.1asphost.com/

**Foppa** · 12-01-2009, 01:07 AM

Sounds good. I put what I have so far live.

[www] dreampagemedia [dot] com

**LadynRed** · 12-02-2009, 04:41 PM

Using images for navigation is not good, and for an SEO company, that is just bad - bad for SEO! You can put your tab images in as backgrounds to the <a>'s and use REAL TEXT for your nav - that font doesn't look all that unique to need it to be an image. I would also recommend that put your nav in a proper list and not have just a bunch of links dropped in there.

Your #logo takes up the entire horizontal space - why not make the div the size for the actual logo?