Hello Exodus_AU,
Put your background in a centered containing element and put your site in that instead of body.
Do you really need all that positioning? I think it would be better to let the document flow naturally. If you did want to position something the #container should be relative and the element you're positioning should be absolute.
See this quick
demo on positioning.
And start with something like this -
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body, html {
margin: 0;
background: #fc6;
font: 100% "Myriad Pro", "Trebuchet MS", Arial;
color: #fff;
}
#container {
height: 600px;
width: 1000px;
margin: 110px auto;
position: relative;
z-index: 1;
background: #000 url(images/background.png) no-repeat fixed center;
font-size: 1em;
}
h1.sml {margin: 10px 0 0 130px;}
h1.pos_right {margin: 0 0 0 10px;}
h1 {
float: left;
clear: left;
}
#logo {
height: 207px;
width: 269px;
position: absolute;
left: 150px;
top: -50px;
z-index: -1;
background: #f00 url(images/logo.png) no-repeat 0 0;
}
#navigation {
height: 50px;
width: 700px;
float: right;
background: #6fc;
}
h2 {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
border-bottom: 1px solid #fff;
}
</style>
</head>
<body>
<div id="container">
<h1 class="sml">Computers</h1>
<h1 class="pos_right">Make IT Work</h1>
<div id="logo"></div>
<div id="navigation" class="nav_position">
<a href="#">Home</a>|
<a href="#">About Us</a>|
<a href="#">Services</a>|
<a href="#">Shop</a>|
<a href="#">Contact Us</a>
</div>
<h2>Welcome</h2>
<!--end container--></div>
</body>
</html>