CSS重复背景固定相对于居中的HTML内容？

Question

我的网页包含的内容包含在始终居中的固定大小的框中，以及填充视口其余部分的重复背景图像。无论我如何调整浏览器窗口大小，我都希望重复背景以保持它与内容框的关系。这可以仅用CSS完成吗？

Answer 1

如果您使用background-position，则可以将背景修复为特定位置，在这种情况下，水平居中为#main-wrap。

http://jsfiddle.net/5kmb2/1/

body {
    margin: 0px;
    padding: 0px;
    background-image: url(http://rturngames.com/images/plethora_bkgnd.png);
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: 50% 0; /* NEW LINE */
}

Answer 2

是的，将背景位置设为中心位置：

background-image: url(http://rturngames.com/images/plethora_bkgnd.png);
background-repeat:repeat;
background-position:center;

http://jsfiddle.net/5kmb2/2/