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; }