Most elegant way to achieve this one-column CSS layout

What is the most simple and elegant way to achieve the following one-column layout using CSS2.1/CSS3, so it will look identical in Firefox/Chrome/Opera?

I have a yellow background consisting of 3 images (header.png, repeating middle.png and footer.png) and a red paragraph of text (variable height). I want the text to partially cover the header and footer image (as on the illustration below). The background outside yellow box should be transparent.

How to achieve this? Maybe using multiple backgrounds? Thanks in advance!