Is this considered unprofessional?

I have a feeling it is, I have been coding like this for a while and always frowned upon it. Basically, if I have a rounded rectangle, and I want to chop off the top and the bottom to have 3 images:

Top.png
Body.png
Bottom.png

What I want to do is show the Top.png, repeat the Body.png on the y-axis (repeat-y) and use the Bottom.png to close it off. At the minute I've got this

HTML

<div id="Body">
	<div id="Top" ></div>
		<div id="Body" >
			<p>Hello</p>
			<p>Hello</p>
			<p>Hello</p>
			<p>Hello</p>
			<p>Hello</p>
			<p>Hello</p>
			<p>Hello</p>
		</div>
	<div id="Bottom" ></div>
</div>

Code (markup):

CSS

#Body{
	float: left;
	text-align: left;
	width: 720px;
	height: 100%; 
	padding-right:30px;
}

#Body #Top{
	float:left;
	width: 720px;
	height: 30px;
	background-image: url("images/Body-Top.png");
	background-repeat: no-repeat;
	display: block;
}

#Body #Body{
	float:left;
	background-image: url("images/Body-Body.png");
	background-repeat: repeat-y;
}

#Body #Bottom{
	float:left;
	width: 720px;
	height: 30px;
	background-image: url("mages/Body-Bottom.png");
	background-repeat: no-repeat;
	display: block;
}

Code (markup):

Surley there's a much better wau to code it than this? I have searched for a while now and have never come across anything. Anyone care to shed some light...

Thanks

 

You could optimize Top & Body into one single element.

 

Do you always have multiple paragraphs? You could do something like

<div id="rounded">
<p>text</p>
<p class="last">some more text</p>
</div>

Then assign top background to #rounded
repeating background to p
and bottom background to p .last

Then fiddle with the margins and everything obviously so it all looks pretty. If you have any other elements hanging around you could use them.