Wrapper not to go from top to bottom - css

Question

Ok, I give up - I can't work it out; the wrapper seems to go from the top to the bottom while I want it to leave a gap at the top and bottom so the background appears through. I can't seem to work it out. I am very novice to this. Any help & ideas very welcome.
Code
body {
background: #ffffff url(bgfin.jpg) repeat;
font-family: Tahoma,arial, sans-serif;
font-size:12px;
color:#666666;
height: 100%;
margin:0;
padding:0;
}
#wrapper {
background: url(body-line.png) center repeat-y;
padding-top: 65px;
padding-bottom: 65px;
}
#wrappertop{
background: url(header.png) top center no-repeat;
}
#wrappertbtm{
background: url(footer-new.png) bottom center no-repeat;
padding-bottom: 65px;
}
#container{
width: 959px;
margin: 0 auto;
}
.title{
width: 959px;
height: 56px;
padding: 15px 0px 10px 0px;
font-size: 30px;
color: #bd7821;
}
#navigation{
position: relative;
width: 959px;
height: 40px;
z-index: 2;
}
#navigation li{
float: left;
z-index: 2;
padding: 0px 34px 0px 0px;
}
#navigation li a{
display: inline-block;
position: relative;
outline: none;
height: 28px;
color: #e3e3e3;
z-index: 2;
font-size: 12px;
padding: 15px 0px 0px 0px;
text-decoration: none;
}
#navigation li a:hover, #navigation li#active a{
color: #bd7821;
text-decoration: none;
}
#header{
position: relative;
width: 959px;
height: 196px;
z-index: 1;
margin: 20px 0px 0px 0px;
}

Answer 1

Try:
body { padding:20px 0; }
Or:
#wrapper { margin:20px 0; }
That is shorthand for:
#wrapper {
margin-top:20px;
margin-right:0;
margin-bottom:20px;
margin-left:0;
}
Remember:
Padding is rendered inside of the element
Margin is on the outside
This might help as a reminder:
How to remember in CSS that margin is outside the border, and padding inside