Sidebar with 3 different backgrounds

I'm currently trying to get my sidebar working with 3 different backgrounds. Screenshot

I tried to fix it with 3 containers but I can't get it right (the top image disappears, etc). Any advice on the best way how to do this would be great.

Demo

HTML

<div class="footer">
    <div class="head">
        <div class="block">
            Test<br/>
            Test<br/>
            Test<br/>
            Test<br/>
            Test<br/>
            Test<br/>
            Test<br/>
            Test<br/>
            Test<br/>
        </div>
    </div>
</div>

CSS

.footer {
    background: url(http: //i.imgur.com/NNtfaL6.png) bottom left no-repeat;
    width: 190px;
    margin-left: 20px;
}
.head  {
    background: url(http: //i.imgur.com/sOVew68.png) top left no-repeat;
    width: 260px;
}
.block {
    background: #1b1b1b;
    color: #fff;
    width: 175px;
    margin-left: 80px;
}

Solution

Sliding door

Instead of using 2 small images and filling in the rest with a background color, it's much simpler to make the top image taller than needed, and use the same small image at the bottom. Because the images are in PNG format, making the top image extremely tall adds very little to the size of the image (since the part that's being added is just a block of 2 different colors, which compresses very efficiently in PNG images).

This approach, using an image that's much larger than needed, is call a "sliding door". Usually, it's applied horizontally to style variable-width content, but it can be used vertically as well, as in this case, to style variable-height content.

Updated Demo (if there's any trouble running it in JSFiddle, here's a standalone version of the demo)

HTML

<div class="outer">
    <div class="inner">
        Test<br/>Test<br/>Test<br/>Test<br/>
        Test<br/>Test<br/>Test<br/>Test<br/>
        Test<br/>Test<br/>Test<br/>Test<br/>
    </div>
</div>

CSS

.outer {
    /* Short bottom image */
    background: url(http://i.imgur.com/q3Y9q16.png) 70px bottom no-repeat;
    width: 266px;
    padding-bottom: 36px;   /* Same as height of short bottom image */
}
.inner {
    /* Tall top image */
    background: url(https://i.sstatic.net/kFqIY.png) 0px top no-repeat;
    color: #fff;
    padding: 74px 10px 20px 90px;
}