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

Question

我的网页的内容包含在一个始终居中的固定大小的框中，并且重复的背景图像填充视口(viewport)的其余部分。无论我如何调整浏览器窗口的大小，我都希望重复的背景保持它与内容框的关系。这可以仅使用 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 */
}