HTML/CSS Repeating Background Issue

[csmager]

This is driving me up the wall, and I can't solve it:

I'm looking at a page for someone that has a nice background 'frame' with drop shadows - so I thought it'd be easier if I just took a sample image of the top bit, a 1px slice of the repeated bits in the middle, then a sample of the end of it. So I have three images:

bg_top.jpg
bg_mid.jpg
bg_end.jpg

I then have a css class called 'background' that has:

.background { background-image: url("/graphics/bg_mid.jpg"); background-repeat: repeat-y }

So, I then made the page:

<div class="background">
[some content here]
<img src="graphics/bg_mid.jpg" /> //just to ensure it gets dragged right to the end
</div>
<img src="graphics/bg_end.jpg" />

Now - where do I put the top part of the image? If I put it outside the div (as I'd've expected), I get a gap:

http://www.eudream.co.uk/index_test1.php

And if I put it inside the div (to avoid the gap), I get the bg_mid.jpg repeated just before the 'top' image is bunged in, which is irritating:

http://www.eudream.co.uk/index_test2.php

Any ideas how to fix this? It can't be impossible, can it? I've set all borders, margins and padding to 0/none for that class, and there's still a gap in the first one.

CSS Here: http://www.eudream.co.uk/css/normal.css

If anyone has any ideas, that'd be great!

 

[csmager]

Woo! I accidentally fixed it in IE.

Chose float: left for the image at the top... no idea why it works, but it does.

Now firefox is bust.

edit: slight change, and it's all working in both. Lucky me.