The full length image background is applied to the #wrap div, which is itself positioned after the header. It is 100% high and therefore goes below the fold.
The header and footer are a fixed height and therefore #wrap has a negative top margin equal to the header and footer height. This brings the footer into view but makes #wrap start above the top of the viewport.
This is fixed by adding a top border to #main to soak up the negative space and bring everything back to an even keel.