The white space at the bottom is because you have moved elements upwards using relative positioning but relative positioning does not alter the flow of the page (unlike margins). The big gap is where the elements would reside had position:relative not been applied. Position:relative only moves things visually but not physically and isn't meant for structural layout in the way that you have used it. An element moved with position relative leaves "gaps" in the page where the element originally lived and to all intents and purposes all elements on the page react as if the element was in its original position. The original position a relative element occupies is always preserved.
Suffice to say you should not use relative positioning for structural changes like that but rather use margins, floats or absolute positioning where necessary but absolute positioning should only be used in small doses or in places where the flow of the page is already preserved.
I'm not sure why you have sliced the whole top image into multiple images as you could have simply placed the whole image in one go (apart from the logo,nav and header text which should be in their own elements). That would save loads of div and loads of silly positioning and rids the html of mark up that shouldn't be there. Html is all about content and CSS the presentation so keep them as separate as possible.
I would have placed the whole top header section as a single background image but would have removed the logo, nav and header text. That lets you start the page with an h1 for the logo and the text Wooton primary school. No need for any special positioning apart from a few margins to nudge it into position Then you could follow with the nav which again would only need margins to nudge it into position and then float the menu items.
The sitemap/contact links could follow the nav but absolutely place them at the top. Next comes the content element which again will need no special positioning as it will fall right into place and be aligned with margins.
There would be very little need for any absolute positioning and no movement via relative positioning.
Your welcome div should really be done in three slices with a top, a repeating middle section and then a bottom section to cap it off. That will allow the middle section to expand should anyone resize the text in the browser. Fixed heights should be avoided as I mentioned before when you are presenting fluid content. You can get away with it in the header as there is little content but for passages of text you need to cater for text resize.
You also have a horizontal scrollbar because you have placed that bushed element absolutely but applie much to large a width. The width only needs to match the image and not the whole layout.
I also note that you are using the html5 doctype but you do not have the shim for IE8 nor have you set the html5 elements to display:block. You will need both of those to make it work in IE8 ands under.
I hope that explains the issues and don't worry its a common mistake to use relative positioning but it just isn't meant for that. It's used for more subtle effects when you want to move something to make it perhaps overlap but while not affecting the flow of the document.
I would have knocked you up a demo but I;m in the middle of a job that has to be finished but if you are still stuck then shout and someone will help