Как создать растягиваемый по вертикали бг блока - Вопросы по CSS

background: 
     url( images/aztec_block.png) 0 0 no-repeat,
     url(images/aztec_block.png) -576px 100% no-repeat, 
     url(images/aztec_block.png) -288px 0 repeat-y;

<div class='top'>
<div class='lefttop'></div>
<div class='centrtop'></div>
<div class='righttop'></div>
</div>
<div class='content'>
<div class='leftside'></div>
<div class='mcontent'></div>
<div class='rightside'></div>
</div>
<div class='bottom'>
<div class='centrbottom'></div>
<div class='rightbottom'></div>
<div class='rightbottom'></div></div>

.top{
display:inline-block
}
.lefttop{
float:left;
bacground:url('ссылка на верхний левый угл') no-repeat scroll 0 0 transperent;
}
.centrtop{
bacground:url('ссылка на центр-топ размер любой, повторяется по оси Х ') repeat-x scroll 0 0 transperent;
}
.righttop{
float:right;
bacground:url('ссылка на центр-топ размер любой, повторяется по оси Х') repeat-x scroll 0 0 transperent;
}
.content{display:inline-block}
.leftside{
float:left;
bacground:url('ссылка на левую сторону') repeat-y scroll 0 0 transperent;
}
.rightside{
float:right;
bacground:url('ссылка на левую сторону') repeat-y scroll 0 0 transperent;
}
.bottom{
display:inline-block
}
.leftbottom{
float:left;
bacground:url('ссылка на нижний левый угл') no-repeat scroll 0 0 transperent;
}
.centrbottom{
bacground:url('ссылка на центр-буттом размер любой, повторяется по оси Х ') repeat-x scroll 0 0 transperent;
}
.rightbottom{
float:right;
bacground:url('ссылка на нижний правый  угл') repeat-x scroll 0 0 transperent;
}

<div class='mcontent'></div>[code]
css
[code]
.mcontent{
border-radius: радиусугла; 
bacrground: rgba(255,255,255,0.5);
}

background: 
     url( images/aztec_block.png) 0 0 no-repeat,
     url(images/aztec_block.png) -576px 100% no-repeat, 
     url(images/aztec_block.png) -288px 0 repeat-y;

    <div class="blok">
        <div class="top"></div>
        <div class="middle">
            <div class="content_bloka">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur convallis placerat orci, sit amet pretium lacus ele...</p>
            </div>
        </div>
        <div class="bottom"></div>
    </div>

        .blok{width:230px; padding-left: 30px; background: url('vstavka.png') no-repeat 0 50%;}
        .top{width:200px; height:20px; background: url('top_bg.png') no-repeat;}
        .bottom{width:200px; height:20px;  background: url('bottom_bg.png') no-repeat;}
        .middle{width: 200px; background: url('middle_bg.png') repeat-y ;}
        .content_bloka{padding: 0 10px;}
        .content_bloka p {margin:0; padding:0;}

.sample4 .sea {
    height:300px;
    width:480px;
    position: relative;
    background: url("media/fishing.svg") top right 10px no-repeat, 
                url("media/mermaid.svg") bottom left repeat-x,
                url("media/fish.svg") 30px 90px no-repeat,
                url("media/sea.png") repeat-x;                
            }