That's a lot going on for one header / footer image... I would look into possibly breaking it up.. You can make the center part a set width of the whole site that would essentially contain the menu. Then after that you would cut a 1px width (x-value)px height and use that as a repeating background behind your header div. The other elements can be strategically planned to be added to other portions of the site to better reflect the image.
Not a great answer, but it is what I would do in this situation. Otherwise you're looking at the image being stretched and possibly lose some focus.
EDIT:
To answer your question in comments
Kind of...
So you would have at least 3 images header_middle_piece.jpg
(the middle of the image that is pointing "down"), footer_middle_piece.jpg
(the rotated version of header.), and repeating_pattern.jpg
From there you would have your leveled layout.
<div id="header">
<div id="container">
<div id="content"></div>
</div>
</div>
Use the same type of layout for your footer.
#header{
width: 100%;
background: url('repeating_pattern.jpg') repeat 0 0 scroll transparent;
height: 20px; // Make this the height of the pattern you are using.
}
#container{
background: url('header_middle_piece.jpg') no-repeat 0 0 scroll transparent;
height: 40px; // height of the middle piece.
width: 200px; // width of middle piece
margin: 0 auto; // center the container.
}
Those are the only styles you need to get that working in the whole. After wards you would need to target the background for the repeating background of those stripes if you still do those, and make a div for the other shapes. If you didn't make this image you will have a hard time breaking it up. But it is doable.