The layout at the moment is an image for visual purposes.
I have tried using the Full Page Background Image that Chris did a post on for the background which is the image that is behind the main content area, but I also need to have a repeating background Image going across the top and bottom for the header and footer to look like this http://johnathangrimes.hostei.com/minecraft/full.html .but if I am correct you cannot have two background images.
So what is the best way to implement that image in the background being full screen and also having a repeating background image for the header and footer.
CSS3 supports multiple background images but that is not needed in your case. Just add a background to the main section or content area. Then add another for the header and the footer with a repeat. You can add as many background images to any element that supports the properties. CSS3 supports multiple background images to the same element, but has limited browser support at this time so use it wisely, but like I said you don’t need it.