如何使用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在我的例子中。

Answer 2

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

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