Basic HTML/CSS background repeating help!

[NeoVo]

Hi all, first time I've had to use this forum for help, but something which should be quite simple has got me slightly stumped.

I have a basic html/css web layout, and i have a background image that i want repeated along the whole of the websites height value (its set to auto to adapt to contents). However I would prefer the background for the footer section to be different, however the footer background inherits the background from the other, and as a result overlaps and prevents the desired affect.

I've tried removing the footer from the main div, which worked but then caused other issues.

I've created a simplified version of my site here to better explain, (the stylesheet is bloated because i havent modified it).
Im finding it quite hard to explain so hopefully someone can see it for themself and help me out.

Thanks in advance!

 

[NeoVo]

The problem is.. the y_background.png image is a 1000 x 1 pixel image which is repeated along the y axis, so it continues along the entirety of the main site structure, the problem is i dont want it to do so for the footer section. If i add another background image, it doesnt remove it, it prints on top of it and because both have sub 100 opacity it looks silly.