CSS: stretch a div to 100% of its parent height with margin / indent

Question

I am currently working on this page (see Figure 1)

I need to shadow the article div, and I cannot use the box-shadow attribute due to browser compatibility.
So, we will divide the background into 3 parts, like this,

<div class="article">
   <div class="background-top"></div>
   <div class="background-mid"></div>
   <div class="background-bot"></div>
   <div class="contents">
       <!-- contents -->
   </div>
</div>

It was nice until we replace the background image with PNG from JPEG, which already contains a light blue background color.
Before changing the image files, I could do this using the z-index property. (set the height of the middle part to 100% and put the top / bot part on it) However, since I change it to PNG, this seems strange due to the opacity of PNG.

Bottom line - I need to do something like this:

100% margin-top/bottom,
, (: http://jsfiddle.net/EaBxP/):

IE6, JPEG, .
.

: , .

Answer 1

. , div .

div.background-mid {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 0px;
    right: 0px;
    background-color: yellow;
}