I tried it in firefox and was able to replicate the problem, and it finally went away if I did the negative top margin and moved the #content-top div inside the #content div, rather than having it be a sibling of #content. Does doing that work on your end?
You cannot put that background on the content wrapper, it is showing through because you have a png image over it with a transparent corner. You will have to either use the grey body background to fill in that corner on the content-top bg image, or put in an extra div and have the content-wrapper bg image start further down the page.
To position the text how you want it you will have to put some of it in that top div. Would it look so bad if only the left side moved up, it would be easier to do. If you do that you will have to modify the content-top p and h1 tags to fit.
Either that or change the way you have cut up the background images. You could also have the bg images separate vertically for left and right content, but you will still have a problem on the right side because that corner is so big.