Background imaging with layers?!

[Treasuresbycaz]

Hello,

I am trying to add a background image to our website. What I want is exactly like the screenshot I have added below.

This is of our website, with a simple Ribbon background image, at the bottom of this background image is a gradient colour going from white to grey (Can not be seen on image)

Everything is where it is meant to be in the screen shot, and it all looks fine on my browsers. But after asking various amounts of people, each one has a different effect?

Some people only see the image in left hand side of the template and others can see the right hand side being sucked behind the right hand side of the template.

I assume this is to do with resolution/screen sizes etc.

Is there a way to code the images and gradient colour in as three seperate images? I've heard of layering but have no idea how to do this. I've read up on another thread on this forum, but still have no idea. I can cope with CSS and PHP if someone just points me in the right direction of what code to put in where...?!

I need the background to look & fit on the screen exactly the same for everyone's browsers.

Click here for website link.

Thanks in advance

Ps: I have currently taken the background image out.