TSO: Footer Hintergrundbild über ganze Breite

Beitrag lesen

SELF-Forum

Footer Hintergrundbild über ganze Breite

TSO
– Informationen zu den Bewertungsregeln

Guten Morgen,

ich habe ein kleineres Problem mit dem Redesign einer Webseite. Und zwar war es mein Ziel möglichst viele unnötige Container-Divs zu entfernen. Eines der Divs hatte die Aufgabe den Seiteninhalt auf eine maximale Breite zu begrenzen und horizontal zu zentrieren und meine Intention war es, diese Aufgabe dem Body-Tag zukommen zu lassen.
Grob soll die Seitenstruktur dann also so aussehen:~~~html <body>
<header>…</header>
Unterschiedlicher Content …
<footer>…</footer>
</body>

  
Mein Problem ist jedoch, dass sich die Hintergrundbilder von header und footer auf die gesammte Viewport-Breite erstrecken sollen. Da der body jedoch in seiner Gesamtbreite begrenzt ist, und header und footer Kindelemente sind, muss da eine Lösung her.  
Für den Header habe ich eine akzeptable Lösung gefunden:  
~~~css
  
body > header   {  
  width:950px;  
  height:140px;  
  position:absolute;  
  top:0; left:0; right:0;  
  margin:0 auto;  
  background-image: url(<URL>);  
  padding: 0 calc((100% - 950px)/2);  
}  
body { margin-top: 140px;}

Ich setze den Header also absolut ans obere Ende zentriere ihn und verpasse ihm ein berechnetes Padding um das Hintergrundbild auf beiden Seiten bis zum Rand anzuzeigen. (Die 100% im calc() entsprechen in der absoluten Position ja der Viewport-Breite)

Problematischer gestaltet sich für mich aber der Footer. Eine absolute Positionierung kommt hier nicht in Frage. Der Footer kann eine variable Höhe haben. Bei relativer Positionierung fehlen mir allerdings die richtigen Werte um zum Rand des Viewports zu gelangen.

Die Variante, mit der ich mich im Moment behelfe ist folgende:

body > footer   {  
  clear:both;  
  width:950px;  
  background:url(<URL>);  
  margin-left: -999px;  padding-left: 999px;  
  padding-right: calc(50vw - 50% - 8px);  
}

Ich verschiebe den Footer also mit margin-left weit außerhalb des Sichtbereiches um ihn dann mit padding-left wieder zurück zu holen. Damit ist das Hintergrundbild auf der linken Seite schonmal bis zum Rand zu sehen.
Für die rechte Seite berechne ich das Padding über die Breite des viewports und des Elements (100vw-100%)/2 und ziehe dann noch 8px ab. Diese 8px sind die gewöhnliche Breite der vertikalen Bildlaufleisten. Mache ich das nicht, wird die gesamte Seite breiter und erhält auch noch horizontale Bildlaufleisten.

Die jetzige Lösung missfällt mir aber grundsätzlich. Unter anderem aus den folgenden zwei Gründen:
1. Kann ich mir nicht sicher sein, dass 8px wirklich ausreichen.
2. Opera hat Probleme mit der Einheit vw im calc-Statement.

Kennt jemand evtl. eine bessere Lösung für mich?
Ich würde nur ungerne wieder das Container-Div einfügen, welches alles außer footer und header enthält, um auf die Breitenbeschränkung des body zu verzichten.

Beitrag melden
–
Informationen zu den Bewertungsregeln