Как горизонтально исправить фон, используя background-attachment, но не вертикально

Question

У меня есть div (#main), центрированный по центру элемента body. body имеет горизонтально повторяющееся фоновое изображение и цвет, выровненные по верхнему левому углу элемента. #main имеет фиксированную ширину, гибкую высоту и собственный фоновый рисунок и цвет.

То, что я пытаюсь сделать, как показано ниже, это чтобы фоновое изображение внутри #main было выровнено с фоновым изображением body. Два фоновых изображения будут похожи, поэтому правильное выравнивание необходимо.

Я попытался использовать background-attachment: fixed; на фоновом изображении #main, за исключением того, что это, очевидно, приводит к прокрутке всего фонового изображения со страницей; где я пытаюсь добиться эффекта, когда фон #main правильно выровнен с фоном body, но повторяется только по горизонтали и не будет следовать за пользователем, когда он прокручивается вертикально.

Демонстрация 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, я уверен, что вы добьетесь того, чего хотите.