it-swarm.com.de

Positionierung mehrerer Hintergrundbilder

Ich habe drei Hintergrundbilder mit einer Breite von 643px. Ich möchte, dass sie so aufgestellt sind:

  • oberes Bild (12px Höhe) no-repeat

  • mittleres Bild Wiederholung-y

  • unteres Bild (12px Höhe) keine Wiederholung

Ich kann es nicht scheinen, ohne dass sie sich überschneiden (was ein Problem ist, weil die Bilder teilweise transparent sind).

background-image:    url(top.png),
                     url(bottom.png),
                     url(middle.png);

background-repeat:   no-repeat,
                     no-repeat,
                     repeat-y;

background-position: left 0 top -12px,
                     left 0 bottom -12px,
                     left 0 top 0;
34
Juddling

Ihr Problem ist, dass der repeat-y die gesamte Höhe ausfüllt, unabhängig davon, wo Sie sie anfänglich positionieren. Somit überlappt es Ihre Oberseite und Unterseite.

Eine Lösung besteht darin, den sich wiederholenden Hintergrund durch den 12px oben und unten in ein Pseudoelement zu schieben. Das Ergebnis ist hier zu sehen (Die Deckkraft in der Demo dient nur dazu, zu zeigen, dass keine Überlappung vorliegt). Ohne Deckkraft, siehe hier . Der relevante Code (getestet in CSS3-Browsern: IE9, FF, Chrome):

CSS

div {
    position: relative;
    z-index: 2;
    background: url(top.png) top left no-repeat, 
                url(bottom.png) bottom left no-repeat;
}

div:before {
    content: '';
    position: absolute;
    z-index: -1; /* Push it to the background */
    top: 12px; /* position it off the top background */
    right: 0;
    bottom: 12px; /* position it off the bottom background */
    left: 0;
    background: url(middle.png) top left repeat-y;
}

Wenn Sie IE8-Unterstützung benötigen oder wollten (die nicht mehrere Hintergründe unterstützt), können Sie den oberen Hintergrund im Hauptdiv und den unteren Hintergrund einfügen, indem Sie das div:after-Pseudoelement am unteren Rand des Containers verwenden.

48
ScottS

Wenn Sie dem Block Padding/Ränder hinzufügen können, die den Hintergründen entsprechen, die Sie positionieren möchten, ohne einen anderen Block zu überlappen, können Sie den background-clip & background-Origin verwenden, um den oberen und den unteren Hintergrund über den Paddings/Rändern und den sich wiederholenden Hintergrund über dem Inhalt zu positionieren/paddings + inhalt.

Hier ist ein Beispiel: http://dabblet.com/Gist/2668803

Für Ihren Code müssen Sie möglicherweise Folgendes hinzufügen:

padding: 12px 0;
background-clip: padding-box, padding-box, content-box;
background-Origin: padding-box, padding-box, content-box;

oder 

border: solid transparent;
border-width: 12px 0;
background-clip: border-box, border-box, padding-box;
background-Origin: border-box, border-box, padding-box;

Und du bekommst was du brauchst. Wenn Sie die Füllungen/Ränder nicht erhalten können, funktioniert das Pseudoelement wie ScottS perfekt.

6
kizu

Versuchen Sie es so:

 background: url(PICTURE.png) left top no-repeat, url(PICTURE2.png) right bottom no-repeat, url(PICTURE3.jpg) left top no-repeat;
    }

EDIT: War nur ein Beispiel, aber hier ist die css mit Ihrer css:

background: url(top.png) left 0px top -12px no-repeat, url(middle.png) left 0px top 0px repeat-y, url(bottom.png) left 0px bottom -12px no-repeat;
        }
1
Patrick R

Ich habe tatsächlich eine einfachere Lösung gefunden, weil ich dieses Problem mit einer horizontalen Navigation hatte.

Anstatt Code wie die anderen Antworten hinzuzufügen, müssen Sie ihn einfach anders in Ihrem CSS auflisten. Das mittlere Bild, das sich wiederholt, muss als letztes aufgelistet werden, nicht als erstes oder als zweites.

In meinem Code sieht es so aus:

background-image: url(../images/leftNav.gif), url(../images/rightNav.gif), url(../images/centerNav.gif);
background-position: left, right, center;
background-repeat: no-repeat, no-repeat, repeat-x;
1
user2585434

Die einzige (praktische, nicht haarbedrohliche) Methode, die ich sehe, besteht darin, dies in Javascript zu tun, wenn die Seite geladen ist und wenn die Größe geändert wird, mit einer Leinwand, die an innerHeight und die 3 Bilder angepasst ist: Zeichnen Sie das erste einmal Zeichnen Sie oben eine Sekunde so oft wie nötig, um den Rest der Leinwand zu bedecken, und zeichnen Sie die dritte unter der Leinwand. Positionieren Sie die Leinwand bei 0,0 mit einem lächerlich negativen Z-Index.

Ich hatte einen Versuch mit 3 Bildern (643 x 12, 100 und 12) und natürlich ist die erste Ausgabe, die ich sah, dass das dritte Bild über einen Teil der letzten Wiederholung des zweiten Bildes gezeichnet wird - es sei denn, Sie haben ein Fenster Höhe von genau 12 + 12 + (p2.height * X) haben Sie einige Überlappungen. Aber das wird erwartet, richtig?

0
dda

Ein radikaler, aber effektiver Weg, um damit umzugehen, wenn:

  1. sie möchten Hintergründe ohne Überlappung zu einem ": Vorher" anwenden
  2. das ": before" -Element als bekannte maximale Höhe

&:before {
    background: url('vertical-line.png') no-repeat 0px,
                url('vertical-line-repeat.png') no-repeat 140px,
                url('vertical-line-repeat.png') no-repeat 200px,
                url('vertical-line-repeat.png') no-repeat 260px,
                url('vertical-line-repeat.png') no-repeat 320px,
                url('vertical-line-repeat.png') no-repeat 380px,
                url('vertical-line-repeat.png') no-repeat 440px,
                url('vertical-line-repeat.png') no-repeat 500px,
                url('vertical-line-repeat.png') no-repeat 560px,
                url('vertical-line-repeat.png') no-repeat 620px,
                url('vertical-line-repeat.png') no-repeat 680px,
                url('vertical-line-repeat.png') no-repeat 740px;
}
0
Kevin Struillou

Hier ist eine Methode, die 3 Divs für die Top -, Middle - und Bottom - Bilder verwendet, die transparent sind und auf Ihre Webseite angewendet werden können.

Hintergrundbild ist optional.

In modernen Browsern getestet und ist IE8-freundlich.

Mit dieser Methode können Sie das body -Element so behandeln, wie es behandelt werden sollte, d. H., Ihr Webseiten-Markup muss not nicht in einem Wrapper oder einem enthaltenden Element sein.

jsFiddle-Beispiel
jsFiddle-Beispiel mit zentrierter Füllung

Da im obigen Beispiel Bildplatzhalterinhalte verwendet werden, die für Ober- und Unterbilder ohne Transparenz sind, können Sie mit diesem jsFiddle, das transparente Mini-Symbole im Wiederholungsmodus HERE verwendet, die Markierungsfunktion mit Transparenz überprüfen.

0
arttronics

um die Hintergrundposition mit 2 Argumenten zu verwenden, müssen Sie in erweiterter Schreibweise backgroud-position-x und backgroud-position-y schreiben.

background-position-x: left 0;
background-position-y: top -12px, bottom -12px, top 0;
0
WantToDo

Ich denke, z-index wird das Problem beheben, da z-index nur CHILD-Elemente betrifft, was bedeutet, dass Sie nichts anderes auf der Seite verderben können, das z-index verwendet.

obere und untere Bilder z-index:3;

mittleres Bild z-index:2;background-repeat:repeat-y;

0
jay