Amigos,
Enquanto esperava desenvolvi uma solução. Talvez seja meio tosca e exista forma melhor, mas lá vai... de repente até ajuda alguém!
A ideia é basicamente capturar a largura da janela do browser do cliente, subtrair esse valor do tamanho total da imagem e dividir por dois. O resultado será a posição para a qual deslocaremos a imagem de fundo para a esquerda.
Por exemplo, no meu caso a imagem de fundo tem 1920px. Se a largura do browser do cliente for 1600px, então a conta resultará em 160px. Daí é só modificar o valor de background-position para -160px, assim:
<style type="text/css">
body {
background-image: url(warbg.jpg); // url da imagem a ser usada como fundo
background-repeat:no-repeat;
}
</style>
<script>
function AdjustBG()
{
var cw = document.body.clientWidth;
var disp = (1920-(cw+16))/2;
document.body.style.backgroundPosition = "-" + disp + "px 0px";
}
window.onresize = function(event) {
AdjustBG();
}
</script>
</head>
<body onload="AdjustBG();">
</body>
</html>
Observe que a função AdjustBG é chamada duas vezes: primeiro no carregamento da página e depois dentro do evento onresize caso o cliente redimensione a janela do browser.
:)