A background image x pixels wide cannot fill a screen whose horizontal resolution is greater than x pixels. If repeat is on, it will repeat, and if repeat is off, you will get plain colored borders. CSS cannot stretch a background image (afaik).

You found the only simple way I know to fix the problem. Another possibility is to center the image and not repeat it, which will at least leave you with something tidier looking in wide resolutions.

It is actually possible to size a background image dynamically, but it's so hard in practice I don't think anyone does it. Basically you have to use a pseudo-background, i.e. put the image in the html, use the browser to resize it and use the z-axis to put the content on top of it. I've never done it, so I don't know if you could use server-side scripting or whether you'd have to use javascript. Also you'd either have to have an image that looked good stretched, or else resize it vertically in proportion to horizontal stretch. Not to mention, browser resizing tends to make an image look terrible.

Actually, with a fairly complex server-side program, you could regenerate the image. Like in PHP, you could read the image file into a temporary table and then regenerate it to fit the precise width of the screen using the gd library, and it should look pretty good. I just can't imagine anyone actually doing it.