Florian: mehrere (verschiedene) background-images

Beitrag lesen

Hallo!

Ferner willst du, falls der Viewport breiter ist als dein "Content-Bereich", links und rechts davon ein Hintergrundbild erscheint?

Ganz exakt. Das will ich.

  1. Du erstellst dir 2 Container-Elemente, die du beide absolut positionierst. Eins links am Rand, das andere rechts am Rand und beide jeweils 50% breit. Somit kannst du jedem Container ein unterschiedliches Hintergrundbild (oder auch mehrere) zuweisen.

Ja diese Möglichkeit habe ich auch schon probiert, ist aber in meinem speziellen Fall leider nicht möglich.

Es wäre aber trotzdem hilfreich, wenn du die Art deines gewünschten Hintergrund(bildes) mal näher erläutern würdest.

Das Problem ist folgendes:
Ich habe über die gesamte Breite des Bildschirms ein halbtransparentes durchgängig wiederholendes Muster (ähnlich einer komplexen Autoreifenspur).
Zentriert befindet sich die Seite mit einer Topnavigation. Hier muss das Muster an bestimmten Stellen abgeschwächt bzw. unterbrochen werden.
Rechts und links von der zentrierten Seite sollen (sofern es noch einen anzuzeigenden Bereich gibt) Farbverläufe das Muster so manipulieren als käme es aus dem Hintergrund. Allerdings darf das Muster nicht unterbrochen werden, da sonst der Effekt weg ist.

Aus dem Grund muss auch das linke und rechte Element genau dort einsetzen wo das zentrierte Content-Element aufhört und darf nicht darüber hinausragen (Daher kann ich auch keine width von 50 % mitgeben - ich kann das Bild nicht unter den Main Content schieben).

Ich dachte eigentlich dass das ein kleineres CSS Problem darstellt, da ich ja nur einen Fixen Wert habe und 2 Container die Anweisung geben möchte: dehne dich aus bis du auf einen fixen Bereich stößt.