javascript - 如何使用 JavaScript 将背景图像在不同屏幕分辨率的网页上居中？

Question

我想确定客户端计算机的屏幕分辨率并使用 JavaScript 将背景图像设置在中心。

我已经走了这么远:

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

我已经添加了名为 background 的 div 标签和 <img>标记图像文件的位置。

如有任何帮助，我们将不胜感激。

Answer 1

您不需要为此使用 JavaScript。您只需使用 CSS background-position 即可做到这一点:

#background {
     background-image: url('https://www.google.com/images/srpr/logo3w.png');
     background-position: center;
     background-repeat: no-repeat;
}

DEMO - 它也可以在元素内部工作，而不仅仅是我的示例中的 body 。