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) });
}

我已经添加了名为的 div 标签background和<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;
}

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

Answer 2

这将为您提供跨浏览器分辨率

var browserWidth = $(window).width();
var browserHeight = $(window).height();