如何使用background-attachment水平固定背景而不是垂直固定

Question

我有一个居中在body元素中间的div (#main)。body有一个水平重复的背景图像和颜色，与元素的左上角对齐。#main有固定的宽度，灵活的高度，以及它自己的背景图像和颜色。

如下图所示，我要做的就是让#main中的背景图像与body的背景图像对齐，这两个背景图像会很相似，所以正确的对齐是必须的。

我尝试在#main的背景图像上使用background-attachment: fixed;，但这显然会导致整个背景图像与页面一起滚动；我试图实现的效果是，#main的背景与body的背景正确对齐，但只在水平方向上重复，并且不会在用户垂直滚动时跟随用户。

Demonstration http://img163.imageshack.us/img163/2783/bgfixedexample.png

(我试着把这个贴到doctype上，但它不接受我的谷歌OpenID)

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属性，我相信你会得到你想要的。