the problem is that you are using an image for the background, and the image has a height of 1389px. You cant stretch the image height, and using the repeat option would not look that good.
you will need to create another background image that has the height you need to cover the entire checkout form. upload it to the same folder as the existing midground.gif. then on the checkout page add the following style just before the closing </head> tag:
<style type="text/css">
#page {
background-image: url("../images/checkout-midground.gif");
background-repeat: no-repeat;
}
</style>