Wie kann ich ein Bild über mehrere Abschnitte hinweg mit Pausen dazwischen fortsetzen? - HTML, CSS, Bild, Stile

Ich arbeite mit etwas einfachem HTML und CSS, aber ich kann nicht herausfinden, wie ich den gewünschten Effekt erzielen kann. So sieht es jetzt aus. Das Hintergrundbild ist der Hintergrund für aContainerabschnitt und jedes rote Kästchen ist ein Abschnitt innerhalb dieses Containers. Ich mag, dass das Hintergrundbild über die Kästchen hinweg durchgehend ist (d. H. Nicht wiederholt wird), aber ich möchte, dass es nicht im Raum zwischen den Kästchen erscheint. Gibt es eine Möglichkeit, dies zu erreichen?

Antworten:

Es gibt verschiedene Lösungen, abhängig von den gewünschten Details:

Wenn die Räume klein werden und Sie wollenWenn Sie den Hintergrund überall auf der gesamten Seite anzeigen, können Sie mithilfe von CSS Rahmen auf Ihre Boxen anwenden, die "über" dem von Ihnen angewendeten Hintergrund rendern. Wenn Sie dem "TEAM" -Div einen Rand nach rechts und dem oberen rechten Div einen Rand nach unten setzen, entsteht die "Trennung", von der Sie sprechen.

Wenn Sie den Hintergrund nur in den Abschnitten wollenrot umrandet, können Sie in Betracht ziehen, den Hintergrund des dahinter liegenden Elements zu entfernen und ihn für jedes Div separat anzuwenden. Wenn Sie die Hintergrundposition verwenden, können Sie den Hintergrund wie ein einziges festes Stück erscheinen lassen, das nur durch den Abstand zwischen den Feldern getrennt ist.

Beispiel Pseudo-CSS:

div.team,
div.top_right,
div.bottom_right {
background: transparent url(image/my_bg_image.jpg) 0 0 no-repeat;
}

div.top_right {
background-position: -500px 0; /* assumes the team div was 500px wide */
}

div.bottom_right {
background-position: -500px -250px; /* assumes the top_right div is 250px tall */
}