JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div class="box-h">
        <div class="box-f">
            <h1>Классическое оформление блока тянущегося по высоте</h1>
        </div>
    </div>
</div>

CSS

body {
    background: url(http://i.imm.io/aEEP.jpeg);
}
h1 {
    margin: 0
}
.box {
    background: url(http://img51.imageshack.us/img51/8693/dddaf61491854cca9e82c40.png) repeat-y;
}
.box-h {
    background: url(http://img33.imageshack.us/img33/6267/5676e17a93cf413d8b7ee0a.png) no-repeat;
}
.box-f {
    background: url(http://img231.imageshack.us/img231/9053/6f08dff67aa8468a90b1ff6.png) no-repeat 0 100%;
    padding: 20px;
    min-height: 300px; /* подганяем по высотам верхней и нижней части */
}
/* картинки хоть и в пнг формате, они без полупрозрачных областей
    просто "резал" не в фотошопе, а с помощью проги для скринов 
    http://lightshot.skillbrains.com/
*/