Can't get banner image to register (line up) over background image

Greetings Oh Wise Ones :-)

I'm building a band website that uses a large (1680 x 1120 px) background image gif with the intention that the image will fill a range of monitor sizes and resolutions. The image features sunrays radiating from a point.

Overlaid and top-centred on this background is a banner image of the band (900 x 450 px). The point source of the sunrays is behind the drummer.

Here's the desired result, the sunrays radiating seamlessly to the edges of the monitor.

http://www.theremedy.com.au/graphics/band-backgrd-composite.jpg

Having composited the image above, the band pic was cropped out and saved seperately, then the background was saved with the band layer turned off. So as long as the browser overlays them top-aligned and centred the rays should match up perfectly.

But check the discontinuities in some rays here
(http://www.theremedy.com.au)

Can anyone say why they don't line up? And if they line up one one monitor size and rez, will that be true for all ?

Many thanks..........Jon

1. You should have used the background image exactly like a background, that means using the CSS background property of the body, not straight like an IMG element.

2. You should have cropped the band image without the background rays, that means as a transparent PNG image, not a JPG

Shazaam! Thanks Kor. Going transparent sure solved the registration issue.
But looking at the result on 2 different monitors the background position relative to the band image differs on each monitor. No biggie but I imagined that the background might scale up or down but its focal point would remain centred. Don't why that shift happens - but it would mean an impossible task lining things up using my previous method, even if I got it right on one monitor.

Use the position to center the background.

background-attachment:fixed;
background-position:center;

More goodness. Thanks!