Try this code in a new, blank HTML page. In this case, background-image must be applied to the body selector. You can see a live demo here:
http://alt-web.com/TEMPLATES/FixedLayout.shtml
<!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" />
<title>Fixed CSS Layout</title>
<style type="text/css">
html,body {
font-size:100%;
margin:0;
padding:0;
line-height: 100%;
}
body {
background: #EBEBDF url(Images/BG/coolBG.jpg) no-repeat fixed;
line-height: 1.5;
font-size: 16px;
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
width: 1250px;
color: #999;
}
#Wrapper {
width: 900px;
margin:0 auto; /**with width, this centers page**/
}
#Header {
text-align: left;
border: 1px dotted red;
color: #666;
min-height: 75px;
}
#Content {
border: 1px dotted silver;
color: #006666;
padding: 12px;
line-height:1.2;
}
#Footer {
border: 1px dotted red;
}
/**fixed positioned menu**/
#Menu {
position:fixed;
top: 120px;
left: 10px;
min-height: 150px;
width: 140px;
border: 2px solid #FF9933;
}
#navlist li {
list-style: none;
margin: 0 0 0 -12px;
display: inline-block;
font-size: 2em;
padding: 0;
}
/**Links**/
a{text-decoration: none}
a:link {color:#4488c3;}
a:visited {color:#4488c3;}
a:hover,a:active,a:focus{
text-decoration: underline}
</style>
</head>
<body>
<!--begin Fixed Menu -->
<div id="Menu">
<h3>Fixed #Menu</h3>
<ul id="navlist">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul> <!--end navlist -->
</div> <!--end menu -->
<!--begin page Wrapper -->
<div id="Wrapper">
<div id="Header">
<h3>#Header</h3>
<!--end Header --></div>
<div id="Content">
<h3>#Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue libero sed orci porttitor non tempus ante ultrices. </p>
<p>Donec sollicitudin nisl at eros pellentesque bibendum vel eu eros. In faucibus rutrum quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Quisque porta sodales enim, hendrerit consectetur libero eleifend vitae. Suspendisse posuere tempor posuere? Duis congue nunc a massa lobortis mattis! Integer imperdiet erat odio, eu consequat quam. Donec feugiat sem et orci faucibus tristique et et mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue libero sed orci porttitor non tempus ante ultrices. </p>
<p>Donec sollicitudin nisl at eros pellentesque bibendum vel eu eros. In faucibus rutrum quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Quisque porta sodales enim, hendrerit consectetur libero eleifend vitae. Suspendisse posuere tempor posuere? Duis congue nunc a massa lobortis mattis! Integer imperdiet erat odio, eu consequat quam. Donec feugiat sem et orci faucibus tristique et et mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue libero sed orci porttitor non tempus ante ultrices. </p>
<p>Donec sollicitudin nisl at eros pellentesque bibendum vel eu eros. In faucibus rutrum quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Quisque porta sodales enim, hendrerit consectetur libero eleifend vitae. Suspendisse posuere tempor posuere? Duis congue nunc a massa lobortis mattis! Integer imperdiet erat odio, eu consequat quam. Donec feugiat sem et orci faucibus tristique et et mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue libero sed orci porttitor non tempus ante ultrices. </p>
<p>Donec sollicitudin nisl at eros pellentesque bibendum vel eu eros. In faucibus rutrum quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Quisque porta sodales enim, hendrerit consectetur libero eleifend vitae. Suspendisse posuere tempor posuere? Duis congue nunc a massa lobortis mattis! Integer imperdiet erat odio, eu consequat quam. Donec feugiat sem et orci faucibus tristique et et mi.</p>
<!--end Content --></div>
<div id="Footer">
<h3>#Footer</h3>
<!--end Footer --></div>
<!--end Wrapper --></div>
</body>
</html>
CSS Tutorials:
http://w3schools.com/
How to Develop with CSS?
http://phrogz.net/css/HowToDevelopWithCSS.html
Learn CSS positioning in 10 Steps
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
