Filling background in right way

Question

I'm trying to make simple website with content background combined from 3 images: top bar, content background and bottom bar.

The problem is that content background appears under top and bottom bar, where should be transparency:

After and before adding BG CSS:

background-image: url('content-top.png'), url('content-bottom.png');
background-repeat: no-repeat, no-repeat;
background-position: left top, left bottom;

.

background-image: url('content-top.png'), url('content-bottom.png'), url('content-body.png');
background-repeat: no-repeat, no-repeat, repeat-y;
background-position: left top, left bottom, left center;

How can I solve this?

edit: I've created same effect with CSS3, solving the problem:

background-color: #d9daca;
-webkit-border-radius: 11px;
border-radius: 11px;
-webkit-box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 1);
box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 1);
border: 1px #8a8977 solid;

Answer 1

The easiest way to do it if you're using images is you create a div for each image within a container and either control the background via css properties or just drop the image into the div. The problem you have is that the top image is overlapping the background picture because its one div. Split it and it'll sort the issue, for example:

<div id="wrapper">
    <div id="top"></div>
    <div id="middle">
        <!-- Content in here -->
    </div>
    <div id="bottom"></div>
</div>

That way all the divs are held within a wrapper. You may need to apply float: left !important; to some of the divs if you are having trouble getting them to line up properly. But this is what i do, and it works perfectly :)

Andy