-top: creates gap. How do I fix gap?

I am working on a dynamic background for a site. This is how it works

Base layer has repeating background image for background
Next layer is a graphic that fades into the base layer.

The thing is, I have to move the top of "next layer" up by -122px. due to it's overlapping image that fades to the base layer. (there is transparency).

This works great, but creates a 122px gap at the bottom of the base layer. Any tricks how to fix that gap?

www.scorpionwear.com/hdwp

CSS
------------------
BASE LAYER:
------------------
#content {
background: url("../images/contentBkg.png") repeat-y scroll left top transparent;
margin: 90px auto 0 -23px;
overflow: visible;
padding: 0;
position: relative;
padding:0;
z-index: 20;
width: 1000px;
}
---------------------------
next layer (overlapper)
---------------------------
.contentTop {
background: url("../images/contentBkgTop.png") no-repeat scroll left top transparent;
position: relative;
top: -122px;
width: 1000px;
}


The actual contents show up in a layer with no BG image. so it goes

<div id="content">
<div class="contentTop">
<div id="noBgImage">CONTENT</div>
</div>
</div>

Can anyone help remove the gap or suggest a better way to do this? Thx

Any help please???