repeat-x bis zum rechten Seitenrand

**brass-t** · 31.03.2010, 11:13

Hallo Leute,
könnt ihr bitte mal folgendes Phänomen nachvollziehen: ich öffne eine Seite mit einem über die ganze Seitenbreite wiederholenden Hintergrundbild, wie z.B. auch auf https://contao.org ganz oben der orange Balken.
Die entsprechende CSS-Zeile sieht hier so aus:

Code:

#wrapper{background:url("tl_files/images/layout/wrapper.png") left top repeat-x;}

Wenn jetzt das Browserfenster so weit verschmälert wird, daß es einen horizontalen Scrollbalken gibt, und ich dann an den rechten Seitenrand scrolle, sieht man daß die Hintergrundgrafik nicht mehr bis zum (neuen) rechten Fensterrand wiederholt wird.
screenshot.png
Hoffe mich verständlich ausgedrückt zu haben. Konnte diesen Effekt mit Firefox, Konqueror, IE, Opera und Chrome reproduzieren.
Kennt jemand Ursache und Abhilfe?

**schman** · 31.03.2010, 11:40

hmm, das kann ich weder mit Chrome, FF noch IE8 nachvollziehen bei mir wiederholt sich das Bild immer bis zum rechten rand.

**Andreas** · 31.03.2010, 13:43

Ich hab das Problem mal auf den Punkt gebracht. Öffne mal diese Seite in deinem Browser Viewport-Demo:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="background:gray" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <title>Viewport-Demo</title>
    <meta http-equiv="Content-Style-Type" content="text/css" />
  </head>
  <body style="background:red;padding:20px">
    BODY
    <div style="background:lightgreen">
      DIV ohne Breitenangabe
    </div>
    <div style="background:yellow;width:968px">
      DIV mit Breitenangabe 968px
    </div>
  </body>
</html>

Wenn du die Breite des Browserfensters jetzt kleiner ziehst, siehst du, dass sowohl HTML als auch BODY ihre Breite nicht an dem breitesten Inhalt berechnen, sondern an dem Viewport. (HTML kannst du nur mit Firebug kontrollieren, BODY erkennst du schon an der Farbe Rot).

Der obere DIV ohne Breitenangabe kann nur so groß sein wie BODY, und das ist es. HTML oder/und BODY eine Breite von 100% zu geben bringt nix, die haben sie sowieso schon.

Deaktiviere mal mit Firebug das Grau von HTML, dann siehst du noch einen seltsamen Effekt. Obwohl der BODY nur z.B. eine Breite von 700px hat (je nachdem wie klein du das Fenster gezogen hast) und eine Höhe von 116px, erstreckt sich das Rot jetzt über die gesamte Hintergrundfläche. Verrückt, ne?

Wie man das jetzt in den Griff bekommt, um deinen erwähnten unschönen Effekt zu beseitigen, weiß ich leider auch nicht, hab ne ganze zeitlang ausprobiert ohne positives Ergebnis.

Gruß, Andreas

**brass-t** · 31.03.2010, 15:15

Bin mir zwar nicht sicher, ob ich das ganz verstanden habe, aber deine Idee mit der Demo hat mich auf den richtigen Weg gebracht.
Leo müßte in seiner layout.css nur #wrapper durch #top (also durch die ID, die direkt bei body steht) ersetzen, dann verschwindet der Effekt.

**Andreas** · 31.03.2010, 15:40

Ja, stimmt. Mit anderen Worten: die Hintergrundgrafik nicht dem Wrapper, sondern dem BODY zuweisen. Mit einer Hintergrundgrafik hat's dann den gleichen Effekt, wie mit dem Rot in meiner Demo oben. Der Body erstreckt sich zwar nach wie vor nicht über die ganze Breite, aber der Hintergrundgrafik ist es egal.

**ph!L** · 31.03.2010, 20:13

Ich hatte den Effekt auch schon bei einem meiner Projekte und behelfe mir in dem Fall meist damit dem body die Hintergrundgrafik zu geben. Alternativ kann man es auch dem html Tag mitgeben, oder auch beide miteinander kombinieren (z.B. dem html den Seitenhintergrund und dem body den fortlaufenden Balken oben)