Horizontale Fixierung eines Hintergrunds mit background-attachment, aber nicht vertikal

Question

Ich habe eine div ( #main ), die auf die Mitte des Bildschirms zentriert wurde. body Element. body hat ein sich horizontal wiederholendes Hintergrundbild und eine sich horizontal wiederholende Farbe, die links oben am Element ausgerichtet sind. #main hat eine feste Breite, eine flexible Höhe und ein eigenes Hintergrundbild und eine eigene Farbe.

Was ich zu erreichen versuche, ist, wie unten dargestellt, das Hintergrundbild innerhalb von #main ausgerichtet an body Hintergrundbildes. Die beiden Hintergrundbilder werden ähnlich sein, daher ist eine korrekte Ausrichtung erforderlich.

Ich habe versucht, die background-attachment: fixed; auf #main Hintergrundbildes, aber das führt natürlich dazu, dass das gesamte Hintergrundbild mit der Seite scrollt, während ich versuche, einen Effekt zu erzielen, bei dem der Hintergrund von #main richtig mit der des body wird jedoch nur horizontal wiederholt und folgt dem Benutzer nicht, wenn er vertikal scrollt.

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

(Ich habe versucht, diesen Beitrag am doctype (außer dass es meine Google OpenID nicht akzeptiert)

Answer 1

Sie können die Eigenschaften background-position und background repeat verwenden

.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.*/
}

Spielen Sie mit diesen CSS-Eigenschaften herum, ich bin zuversichtlich, dass Sie erreichen, was Sie wollen.