CSS Fixed positioned background image as header

SlyOne

04-07-2011, 09:03 PM

Hi all,

Currently building a site & i seem to have run into a strange problem that i've never encountered before.

My goal is to create a fixed navigation bar at the very top of my page. There will be a background image acting as the container. This image is 39px in height and is repeated in the x direction. I've also added a z-index to the nav, so when the user scrolls, the navigation will always be on top of the stack.

The problem; is that when adding position:fixed to my css, it screws the navigation up. Seems to nudge the nav background image to the left instead. It works fine without the position:fixed statement, but i of course need it to reach my goal.

So my call for help, is how to code this little nav properly? My code is shown below:

The markup

<div id="fixedNav">
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#muses">Muses</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>

The CSS:

/* Fixed header navigation */
#fixedNav {
background: url(../images/pswd-fixedNav_01.jpg) center top;
background-repeat: repeat-x;
background-attachment: fixed;
height:39px;
z-index:100;
}
#fixedNav nav {
position:relative;
margin: 0 auto;
width:960px;
height:39px;
}
#fixedNav ul {
list-style: none;
display:inline;
position:absolute;
top:12px;
left:312px;
}
#fixedNav li {
font-size:14px;
color:#787470;
margin-right:32px;
display:inline;
}
#fixedNav li a {
text-shadow:0 1px 0 rgba(0,0,0,0.75);
text-decoration:none;
}
#fixedNav li a:hover {
border-bottom: 1px solid #787470;
}
/* end Fixed header navigation */

thanks for any help you peeps can bestow

Excavator

04-07-2011, 09:45 PM

Hello SlyOne,
Instead of fixing the background image of #fixedNav, try fixing the position of #fixedNav itself.
Something like this (you'll need to correct the path of the background image) - <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<style type="text/css">
html, body {
margin: 0;
background: #FC6;
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {display: block;}
#fixedNav {
height: 39px;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: url(pswd-fixedNav_01.jpg) repeat-x;
}
#fixedNav nav {
width: 960px;
margin: 0 auto;
position: relative;
}
#fixedNav ul {
line-height: 39px;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 312px;
list-style: none;
}
#fixedNav li {
font-size: 14px;
color: #787470;
margin-right: 32px;
display: inline;
}
#fixedNav li a {
text-shadow: 0 1px 0 rgba(0,0,0,0.75);
text-decoration: none;
}
#fixedNav li a:hover {border-bottom: 1px solid #787470;}
#container {
height: 2500px;
width: 800px;
margin: 30px auto;
background: #999;
}
</style>
</head>
<body>
<div id="fixedNav">
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#muses">Muses</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<div id="container">
</div>
</body>
</html>

SlyOne

04-07-2011, 10:18 PM

Nice, the width:100% did the trick!

thanks mate