Help?: Div background image causing browser to scroll instead of just being hidden

My site is being weird...

I have a personal resume site that is having bg problems.

Here is what I want to happen:

I have a background-url for a header div and what I want to see is that when the user's browser window is less than 1024 wide, *no* scrollbar shows up at the bottom, the bg just flows out of the window.

Here is what's happening:

When the user's window is less than 1024, a horizontal scrollbar shows up at the bottom.

----------------
Here is the url: http://danielericmullins.com

HTML & CSS is attached in zip file.

This should do the trick (addition in bold)

body {
background-color:#e9e7dc;
background-image:url(http://www.danielericmullins.com/images/bgPlate.png);
background-repeat:repeat-y;
margin: 0 0 0 0;
width:800px;
overflow: hidden;
}

I've tried that, but then when the browser window is wider than 800px, the header background just stops at 800px. I want it to continue on to the right, but without scrollbars at the bottom if the browser window is less than 800. Plus, it hides the overflow on the y-axis as well (i.e., content).

Does this make sense?

I'm pretty sure I've seen it before ... but maybe not.

Does anyone know if there is a way with JavaScript to prevent a horizontal scrollbar?