expand background image

I am having some issue on how to get this to work...i have it working properly except for the text is in the div that is the middle. There for the text is always centered from top to bottom. I am wanting the text to be top left but still able to expand...

could the issue be that our top and bottom images have too much hieght therefore the middle section really starts in the middle of the div

here is my code and css

CSS:
#box1 {
background-image:url(../images/picFrame_top-200.png); background-repeat:no-repeat;
width: 200px;
float: left;
margin:8px 13px 8px 0;
padding: 0px;
border:0;
}

p { vertical-align:top; padding-left:25px;
}

here is the link to see what i am talking about
http://keifersdesign.com/administrator/vendors.php

<div id="box1">
                <div class="box1header_top"><img src="../images/picFrame_top-200.png"/></div>
                <table style="background-image:url(../images/picFrame_mid-200.png); background-repeat:repeat-y;"><tr><td><p>;lakjsdf ;lakjsdf ;laksjdf ;laksdjf ;laksdjf ;laksdjf ;laksdjf ;alskdfj ;alskdjf ;laskdjf ;laksdf <?php echo $menuDisplay; ?></p></td></tr></table>
      			<div class="box1header_btm"><img src="../images/picFrame_btm-200.png" /></div> 
              </div>

Select allOpen in new window