Headerbild

[I&IFra]

Hallo Zusammen,

ich hänge aktuell an einer Homepage.
Das Headerbild soll über die gesamte Bildschirmbreite gehen (sowie eine Textzeile darunter), der Rest der Seite allerdings auf eine bestimmte Breite begrenzt sein. Wie stelle ich das am Besten an?

Vielen Dank schon mal für die Hilfe.

[dazzle89]

Du könntest im Seitenlayout einen eigenen Layoutbereich anlegen. Entweder mit einer individuellen Position, oder, was einfacher ist, z.B. "unterhalb der Kopfzeile". Im Artikel, der das Headerbild enthält, legst du fest, dass es in diesem neuen Bereich angezeigt werden soll.

Alles was unterhalb des Headerbilds ist, kannst du einfach mit CSS zentrieren (falls es das sein soll) und auf die gewünschte Breite bringen.

[Franko]

Wenn es Seiten übergreifend ist bietet sich die von dazzle89 genannte Contao Vorgehensweise an.

Ansonsten könnte man es auch via CSS lösen. Abhängig von den »parent« Container Settings z.B.:

https://css-tricks.com/full-width-co...width-parents/
https://coderwall.com/p/hkgamw/creat...idth-container

Wenn es nur Layout/Farben betreffen würde z.B.:
https://www.youtube.com/shorts/81pnuZFarRw

[BubbleBass]

Ich würde das Thema gerne noch einmal aufgreifen.
@dazzle89: Der genannte Weg ist leicht umzusetzen und responsiv. Allerdings schaffe ich es nicht, das Bild über die Container-Breite von 960px zu verbreitern, wenn ich z.B. mit einem fullwidth-Layout bei OpenSauce arbeite. Eine zusätzliche css-Anweisung mit 'width: 100vw' brachte auch nicht den gewünschten Erfolg. Wie kann ich vorgehen, dass es klappt?
@Franko: Die von dir verlinkte CSS-Lösung (Coderwall) funktioniert, ist aber leider - nicht nur bei mir (s. auch Kommentare) - nicht responsiv. Die Kombination "Eigener Inhaltsbereich unterhalb der Kopfzeile " mit css

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

funktioniert responsiv, hinterlässt aber leider links und rechtsweiße Streifen, die ich nicht wegbekomme.

Was hingegen super funktioniert, ist der im youtube-Video gezeigte Ansatz, um einen fullwidth-Background bei Inhaltselementen zu erzeugen....Großartig!

Hat jemand sonst noch eine Idee, wie ich ein Header-Bild bei einem 960er Container-über die gesamte Fensterbreite erzeuge?

[mlweb]

Opensauce hat standardmäßig einen Wrapper mit einer maximalen Gesamtbreite.
Es gibt mehrere Möglichkeiten dort Bereiche über die gesamte Breite laufen zu lassen. Wie man es realisiert hängt auch vom Gesamtlayout ab, das geplant ist.
Man kann z.B.

• den Teil der eine Breite von 100vw haben soll, als eigenen Layoutbereich vor dem umschließenden Element platzieren
• den Wrapper auf 100vw setzen und dann für die Elemente eine maximale Breite angeben, die nicht Fullwidth sein sollen laufen sollen