Cropping Background Image for Most Resolutions
 

A newbie question - I setup a 1920x1080 image figuring that those dimensions would handle most PC monitors. In the very centre of this image is an important 1020x768 area which I want to show everytime somebody views the site - obviously it wouldn't display properly if they're a 800x600 user, but I'm figuring most people have gone past that by now. The rest of the background image though is extraneous, and I really don't care if bits of it are cut off depending on the person's screen resolution.

So the question is, how do I ensure that the image is shown from the centre rather than from the top left hand corner? Would I need some code to sense the screen resolution of their monitor and then have different versions for each, or is there a single HTML or whatever language command that will allow me to do this with a single image?

Putting fixed center no-repeat in the background CSS tag?

It would be much more sensible and user friendly if you used an image of the size you actually need and then just had either a white background or some colour the matched the rest of the image. Users don't like having to download huge images. Also why is part of this image so important that it has to be seen??? Web sites are not designed by making a big image that contains information, you use html and text to convey information to the use. And google will just see image and not read anything on it that you consider important. (google doesn't use OCR for example.)

Just because someone has a high res wide screen monitor doesn't mean that they will be displaying their browser at full screen - the main reason for a big wide monitor is to have multiple windows visible at the same time. So even those with a big monitor will not actually see your big image to its full extent. So why punish the poor people with smaller monitors by forcing a long slow download of your big image?