How can I center a background image on a web page for different screen resolutions using JavaScript?
<p>I want to determine the screen resolution of the client machine and the set the background image in the center using JavaScript.</p>

<p>I have come so far:</p>

<pre><code>function centerBackGroundImage()
{
    var browserWidth = document.documentElement.clientWidth;
    var browserHeight = document.documentElement.clientHeight;
    $("#background").css({ "z-index": "-10", "margin:left": (browserWidth / 2) - (browserHeight/ 2) });
}
</code></pre>

<p>I have already added the div tag named <code>background</code> and the <code>&lt;img&gt;</code> tag with the location of the image file.</p>

<p>Any help would be appreciated.</p>
