如何使用背景附件水平修复背景，但不垂直

Question

我有div（#main），其中心位于body元素的中间位置。 body具有水平重复的背景图像和颜色，与元素的左上角对齐。 #main具有固定的宽度，灵活的高度以及自己的背景图像和颜色。

如下图所示，我想要完成的是让#main内的背景图像与body的背景图像对齐。两个背景图像将是相似的，因此正确的对齐是必要的。

我尝试在background-attachment: fixed;的背景图片上使用#main，但显然会导致整个背景图片随页面滚动;我在哪里尝试完成#main的背景与body的背景正确对齐但只是水平重复的效果，并且在垂直滚动时不会跟随用户。< / p>

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

（我尝试在doctype上发帖，但不接受我的Google 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属性，我相信你会实现你想要的。