Hintergrundfarbe für Header quer über den Browser

[ElMariachi]

Hallo,

ich habe eine Contao 3 Webseite angelegt. Der #wrapper ist (mit Responsive Grid) 1140px breit. Nun würde ich dem #header gerne eine Hintergrundfarbe geben, die quer über den kompletten Browser geht und nicht bei #wrapper endet, weil der #header im #wrapper enthalten ist. Bei Contao 2 habe ich einfach die fe_page angepasst und den #header aus dem #wrapper genommen. Wenn ich das nun machen würde, wäre das Responsive Grid zerstört. Habt ihr eine Lösung für das Problem parat?

Einzige Lösung, die mir bisher eingefallen ist, ist dem Body ein Hintergrundbild zu geben. Das geht in diesem Fall allerdings nicht (bzw. ist nicht optimal), weil der Hintergrund einen Verlauf hat und ich somit eine riesige Datei anlegen müsste...

[Toad]

Vielleicht verstehe ich das falsch, aber kannst du dem Body nicht einfach einen Verlauf verpassen?

[timmey123]

body background oder zusätzliches div in fe_page mit positon:absolute, würde ich jetzt spontan sagen ohne großartig drüber nachzudenken ...

[ElMariachi]

Dem body kann ich den Verlauf geben, ja. Dieser Verlauf soll nicht nur im #header sein, sondern auf der kompletten Webseite. -> Das wäre damit erledigt.
Aber nun soll der #header noch eine Hintergrundfarbe bekommen, die eben über die komplette Breite geht.

Ein neues div anlegen und absolut positionieren und mit z-index nach hinten schieben wäre eine Möglichkeit, ja. Aber ist das schön?

[Toad]

Mein #header geht über die Breite soweit ich weiß. Hat dein #wrapper Margin oder Padding?

[ElMariachi]

Weder noch, der hat nur 100% hight und ist relative positioniert...

[ElMariachi]

https://www.paypal.com/de/webapps/mpp/home hier ist es ähnlich wie bei meiner Seite.

[swinde]

Hallo ElMariachi,
vielleicht ist es das was du möchtest:

#header {
  background-color: #025C59;
  height: 150px;
  left: 0;
  min-height: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

[swinde]

In deinem Beispiel, geht der Headerhintergrund auch nicht über den gesamten Bildschirm!

Nimm dir mal Firebug zur Hand und sehe dir die Styleinformation für das html Tag an!

Viele Grüße Steffen

[ElMariachi]

<div class="homepageHero"> geht über die komplette Breite...

[melzebub]

verstehe das Problem nicht. der #header ist doch ein Block Element, geht also immer über die volle Breite, es sei denn, man schränkt bereits den Wrapper ein. Das kann man aber auflösen und dann #header .inside wieder beschränken, genau wie #container und #footer. dann braucht man das mit dem wrapper nicht und hat die Flexibilität die einzelnen Bereiche auch über die volle Breite laufen zu lassen.

[swinde]

<div class="homepageHero"> geht über die komplette Breite...

Das Hintergrundbild hat eine Breite von 1600 Px und die gesamte Webseite hat keine festen Breiten sondern nur Mindestbreiten Angaben.

[ElMariachi]

Wie gesagt: Responsive Grid mit einer Breite von 1.140px -> Wrapper hat also eine Breite von 1.140px. -> Somit kann der #header nicht breiter als das werden...

[ElMariachi]

Ich mache es einfach so, wie timmey123 geschrieben hat... Danke.

[melzebub]

man sollte sich vom grid nicht einschränken lassen. dachte sowas soll helfen und nich stören . also, bau das grid um, oder leg dir in der fe_page einfach ein neues div über den wrapper an. das kannst du dann recht simpel stylen und mit position absolute positionieren.

[ElMariachi]

Neues Div ist angelegt und absolut positioniert. Ist denke ich die beste Variante. LIEBEN DANK an alle!

[mbraun]

Gibt es da inzwischen (unter 3.0.2) auch eine andere Möglichkeit, als die fe_page zu verändern? Updatesicher?
Zudem würde ich gerne weiter den Layout-Builder, Responsive Grid und CSS-Reset verwenden.

Mein (Darstellungs-) Anliegen:
Ich hätte auch gerne einen (vertikalen) Verlauf, der über die gesamte Fenster-/ Bildschirmbreite geht, als Hintergrund für den header, aber eine davon unabhängige Hintergrundgrafik für den body/main.

Besten Dank für jeden Hinweis.

[melzebub]

du bist doch updatesicher, solange du nur die Templates anpasst. Ist nicht schlimm