CSS - Header, Repeat, Footer - Content placement issue

Visual layout desired:

Header Image - Some header content (search bar, text)
Repeating Center Image - Most of the content, near the top it needs to bleed over the header image
Footer Image - Some footer content (links)
Assume the following code layout:

<header>
</header>
<content>
</content>
<footer>
</footer>

Here is my issue. My header image is 158px high, which is quite large. I am repeating a background image in "content" above, and visualy it looks fine, but all the content starts below 158px. If I put a negative margin for "content", then the content moves up, but so does the repeating background image, thus overlapping my header background image. I've been googling for a day now, and can't figure out how best to lay this out, to achieve my desired output.

Can someone give me a hint as to what approach to take. I'd post the actual code, but it is a modified prestashop template, and very involved.

Any help appreciated.