Background colour across the top and bottom

HTML & CSS
1

I am trying to create a background colour spreading across the top and bottom each page in the same colour, with the main background appearing between that background colour. Anyway please see my image example of what I am wanting to do. The numbers in the example are a guide for the problems areas, only 1, 2 and 3 are the real problem areas, number 4 I will be able to work out myself. Could someone please help me with this? If someone could please even start me off, I might be able to work it out. Thanks in advance.

2

You could start with something like this. (I would remove the heights when content has gone in. They are just for demo purposes.)

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style media="all">
html, body,
h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img,
form, fieldset, legend, label, textarea, 
span, em, strong, sub, sup, cite,
table, tbody, td, tfoot, th, thead, tr, tt,
dl, dt, dd, ol, ul, li {
    margin: 0;
    padding: 0;
}

img {
    border: 0;
    vertical-align: bottom;
}
body {background: black;}
.header-outer, .main-outer, footer-outer {width: 100%; min-width: 750px;}
.header, .main, .footer {width: 750px; margin: 0 auto; overflow: hidden;}
.header {height: 100px; color: white;} /*height temporary*/
.header h1 {margin-top: 30px;}
.main-outer {background: #eee;}
.main {height: 300px; background: white;} /*height temporary*/
.footer {color: white;}
.footer p {margin: 10px 0;}
</style>
	
</head>

<body>
<div class="header-outer">
	<div class="header">
	<h1>Website Name Here</h1>
	</div>
</div>

<div class="main-outer">
	<div class="main">
	</div>
</div>

<div class="footer-outer">
	<div class="footer">
		<p>Footer</p>
	</div>
</div>
</body>

</html>