如何使用background-attachment属性水平固定背景而不垂直固定？ (关于IT技术的问题)

Question

我有一个 div 元素（#main），它已经被居中到了 body 元素的中心。 body 元素有一个水平重复的背景图像和颜色，对齐到元素的左上角。 #main 有一个固定的宽度，灵活的高度和自己的背景图像和颜色。

我的目标是，如下所示，使 #main 内部的背景图像与 body 的背景图像对齐。两个背景图像将是相似的，因此正确的对齐是必要的。

我试图在 #main 的背景图像上使用 background-attachment: fixed;，但这显然会导致整个背景图像随页面滚动；而我想要实现的效果是，#main 的背景与 body 的背景正确对齐，但只在水平方向上重复，并且不会随着用户垂直滚动而移动。 演示 http://img163.imageshack.us/img163/2783/bgfixedexample.png

我尝试在doctype上发布这篇文章，但它不接受我的Google OpenID。

- Lachlan McDonald

Answer 1

您可以使用属性background-position和background-repeat.

.myClass {
    background-image:url(myimg.png);
    background-repeat:repeat-y;
    background-position: -5px 5px; /* Any percentage or pixel value you want
     or you can use center top etc.*/
}

尝试调整这些CSS属性，我相信您可以实现所需的效果。

- Zoidberg

---

事后看来，我感觉相当愚蠢。假设 #main 是水平居中的，背景位置设置为“顶部中心”将正确对齐它。我之前没有注意到这一点，因为在我的测试页面中，#main 有一个不正确的边距并且没有居中。 - Lachlan McDonald