It might be overwhelming to have one header/footer image with so much going on... Consider breaking it up into smaller elements. You could set the center portion as a fixed width for the entire site, containing the menu. Then use a 1px wide (x-value)px high piece as a repeating background behind your header div. Strategically plan where other elements can go on the site to better showcase the image.
While not a perfect solution, this is what I would do in this scenario. Stretching the image could cause it to lose focus.
EDIT:
To address your comment question
Somewhat...
You would need at least three images header_middle_piece.jpg (the downward-pointing middle section), footer_middle_piece.jpg (a rotated version of the header), and repeating_pattern.jpg
This way, you can create a structured layout.
<div id="header">
<div id="container">
<div id="content"></div>
</div>
</div>
Apply a similar layout to the footer.
#header{
width: 100%;
background: url('repeating_pattern.jpg') repeat 0 0 scroll transparent;
height: 20px; // Adjust to match pattern height.
}
#container{
background: url('header_middle_piece.jpg') no-repeat 0 0 scroll transparent;
height: 40px; // Middle piece height.
width: 200px; // Width of middle piece
margin: 0 auto; // Center container.
}
These are the essential styles needed for this setup. Afterwards, target the background for the repeated stripes if desired, and create separate divs for additional shapes. Keep in mind that separating an existing image like this may pose a challenge, but it can be achieved with effort.