So positionieren Sie die Trennlinie durch Hintergrund wiederholen

Question

Ich möchte eine Wiederholung-x auf meinem Körper Hintergrund für eine Website haben, aber der Hintergrund ist 1024 breit, also auf breiteren Displays, die Zeile, wo das Bild wieder beginnt wird auf der rechten Seite des Körpers positioniert und möglicherweise sichtbar. Mein Inhalt ist in einem div 800 breiten Körper zentriert. Ich möchte, dass das "Splitting" wie vom wiederholten Hintergrund im Zentrum des Körpers geschieht, wo es durch den Inhalt verborgen ist.

Ich bin mir sicher, dass dies möglich ist, mit einigen Tricks, deren Details über meine Anfänger-Design und Layout-Fähigkeiten hinausgehen.

Abhilfe: Ich verwendete das Liquid Rescale GIMP-Plugin, das seam carving verwendet, um die Bilder auf das Doppelte ihrer ursprünglichen Größe zu dehnen. Es funktioniert großartig, und ich freue mich jetzt, aber es ist keine Antwort auf diese Frage.

Answer 1

nur im Stil setzen:

background-position: 400px 0px; 

dies die Wiederholung 400px von der linken Seite beginnen (also die Spaltung unter dem Inhalt bewegen)

Answer 2

Ich denke, es ist nicht möglich, diese dynamisch zu tun (ohne Berücksichtigung der Bildschirmgröße) ohne Verwendung von CSS-Ausdrücken. Ich kenne die Details zur Browserunterstützung allerdings nicht. Eine schnelle Google-Suche zeigte diese Seite als ein Beispiel dafür, wie das geht.

http://valums.com/vertical/

Answer 3

Eine einfache Möglichkeit, dies ohne CSS Tricks oder zusätzliche Markup zu tun ist, um das Bild zu ändern. Zentrieren Sie das Hintergrundbild mit:

background-position: top center; 

... und dann die tatsächliche Bilddatei in einem Editor versetzen. Verwenden Sie in Photoshop Filter >> Andere >> Offset und verwenden Sie einen horizontalen Wert, der der Hälfte der Bildbreite entspricht. Ebenso verwenden Sie bei Gimp Layer >> Transform >> Offset.

Das ist nicht die saubere CSS-Lösung, die Sie gesucht haben, aber es ist eine schöne pragmatische Lösung.

Answer 4

Hinzufügen zu dem, was David sagte, ein nahtloses, Fliese Hintergrundbild zu schaffen ist nicht so schwer:

Seamless background with Photoshop

Es dauert ein wenig Zeit, aber es wird auf allen Bildschirmauflösungen, wenn Sie gut aussehen sind fertig.