<style>

#wrapper
{
	background-color: White;
	position: relative;
}

#content
{

}

#top
{
	background-image: url("Untitled-2.png");
	background-repeat: no-repeat;
	position: relative;
	height:175px;
}

#bottom
{
	background-image: url("Untitled-3.png");
	background-repeat: no-repeat;
	position: relative;
	height: 203px;
}

#middle
{
	background-image: url("Untitled-4.png");
	background-repeat: repeat-y;
	position: relative;
	width: 263px;
}


</style>

<div id="wrapper">
	<div id="top"></div>
	<div id="middle">
		I want to place text on the top and bottom shading layer as well.. and at the same time, expanding this layer's background.. how??
		<br><br><br>
	</div>
	<div id="bottom"></div>
</div>