form with images in background when top one is high
===

I have form with background consisting of 4 parts: frame_border_top.png (height 18px), form_border_top.png (height 200px, there is gradient on this picture), frame_border_middle (height: 1px, repeat-y) and frame_border_bottom.png (18px). And I need to build form background from those images. The difficulty is that form content should begin display na form_border_top.png (it shoukd be background for top 5 or 6 inputs). So the form should be (top to bottom, pixel are on Y axis):
0-17px frame_border_top.png
18px-217px form_border_top.png
218px-599px (or whateveor, depending on content height) frame_border_middle
600px-617px frame_border_bottom

And text starting at 20px.

How to style this with css? It would be easy but this form_border_top.png part.

And it must work in IE7.

I tried such HTML

		<div id="Content">
			<form action="">
				<div class="form-top"></div>
				<div class="form-background-top"></div>
				<div class="form-content">
					... inputs ...
				</div>
				<div class="form-bottom"></div>
			</form>
		</div>
and

	#Content {
		width: 942px;
	}

	form {
	}

	.form-top {
		background: url("images/form_top.png") no-repeat scroll 0 0 transparent;
		height: 18px;
	}
	.form-background-top {
		background: url("images/form_background.png") no-repeat 
			scroll 0 0 transparent;
		height: 200px;
	}
	.form-content {
		background: url("images/form_middle.png") repeat-y 
			scroll center 0 transparent;
	}
	.form-bottom {
		background: url("images/form_bottom.png") repeat 
			scroll 0 0 transparent;
		height: 18px;
	}
and tried different combinations of position, margin, padding but without success.