背景图像的视口居中？

Question

我以前从未处理过这样的网站，但这就是我要完成的事情......

我有一张大图像（1000px x 1000px），我想将其用作背景图片。内容本身仅占用500px x 500px左右，并且它需要始终相对于背景图像位于相同位置。

描述起来很复杂，所以我会拍照：

这本身似乎并不那么难，但如果浏览器比我的11英寸屏幕大呢？如果浏览器对于背景图片太大，我想要一个简单的颜色来显示。

我看到的另一个问题是它始终保持居中，滚动条不显示，因为它们只应在浏览器窗口小于内容框时出现。

我很乐意澄清更多，因为我很难说出我想要完成的事情。

Answer 1

不清楚您遇到了什么问题。以下是您可能要执行的操作的示例：http://jsfiddle.net/mhgdZ/

Answer 2

使用CSS：

HTML{ width:100%; height:100%; 
      background:#F00 url(path/to/your/image.jpg) center center no-repeat;
      background-attachment: fixed;
      background-size:100% auto;
}

background总结了background-color，background-image，background-position和background-repeat（按此顺序）。其他两个目前不能包含在background中（尽管W3C规范另有说明）。

background-attachment:fixed与图层类似position:fixed，无论用户如何滚动，都会确保图片保持可见状态。如果您不想要，请在您的内容周围包装一个容器并将上述声明分配给它而不是HTML - 节点

background-size将图片缩放到背景中 稍微玩一下这个值 - 我在这里提出的将缩放图像以适应视口的宽度。 100% 100%将拉伸它以始终覆盖整个视口，auto 100%将缩放它以适应视口的高度。在两种情况下，使用auto可能会发生一些剪裁 - 或者背景颜色（我选择红色）将显示在侧面/顶部和底部

提供HTML - 节点width:100%;height:100%，如果您的内容未填满屏幕，请确保底部没有白色边框