将body/div的背景位置居中到视口的中间

我的身体高度为1000px，屏幕高度为100px。我想显示占据整个<body>宽度和<body>高度的<div>。那<div>有一个background-image，我想让它显示在视口的中间。我怎样才能实现这个使用Javascript。将body/div的背景位置居中到视口的中间

我用下面的概念，但它并没有为我在移动设备上工作

ele.style.backgroundPosition = document.body.scrollTop + 
           (window.innerHeight/2) - heightOfImage;

来源

2012-12-10 Exception

其中移动设备你具体定位？ – vee

@vee所有HTML5和CSS3支持的设备 – Exception

background-position CSS属性可以带两个参数，如下所示：'background-position：[horizontal] [vertical]'。如果你只指定一个参数（如你的例子），它将只设置水平滚动位置（将垂直位置保持在50％）。你只是试图垂直居中图像，或者你真的希望它始终显示在视口的中间，即使用户向下滚动页面？ – vee

最简单的解决方案可能是有一个固定的定位<div />与它设置背景图片，它的Z-索引集，使其出现在页面上的所有其他元素下。

例子：http://jsfiddle.net/gztRa/

如果你真的想要去的JavaScript的路线（这是我个人不会做，如果我能帮助它在这里），你将不得不做这些方针的东西：

钩到该元件的滚动事件多数民众赞成滚动
每次这种火灾，调整滚动位置，像这样：

var verticalPosition = document.body.scrollTop + (window.innerHeight/2) - heightOfImage;

ele.style.backgroundPosition = 'center ' + verticalPosition + 'px';

注意添加'px'，因为这是很重要的。在“中心”之后还有一个空格，所以你最终应该看起来像这样：ele.style.backgroundPosition = 'center 50px'。

实施例（使用的Zepto或jQuery的）：http://jsfiddle.net/7aqgG/7/

来源

2012-12-10 11:59:55 vee

将body/div的背景位置居中到视口的中间

回答

相关问题