Hallo!
Ich muss 2 Background-Bilder in eine Seite einbinden.
Beide Dateien sollen sich in der Höhe über den ganzen Browser strecken auch wenn ich diesen in der Höhe dehne.
Folgendes habe ich zur Zeit als CSS:
Code:
html, body { margin: 0; padding: 0; background: url(../img/bg_contentleft.gif) repeat-y left; height: 100%; }
und
Code:
#doc { background: url(../img/bg_contentright.gif) repeat-y right; height: 100%; }
Der ID-Selektor '#doc' ist im HTML direkt unter <body>.
Das Gerüst für die 3 Spalten sieht grob so aus:
Code:
<div id="docContent">
<div id="columnLeft">
<div class="columnIn">Lorem ipsum...</div>
</div>
<div id="columnRight">
<div class="columnIn">Lorem ipsum...</div>
</div>
<div id="columnMiddle">
<div class="columnIn">Lorem ipsum...</div>
</div>
</div>
Die Selektoren dazu:
Code:
#docContent { }
#columnLeft { width: 225px; position: absolute; left: 10px; }
#columnLeft .columnIn { padding: 0 10px 0 0; }
#columnMiddle { margin: 0 235px; }
#columnMiddle .columnIn { padding: 0 10px; }
#columnRight { width: 225px; position: absolute; right: 10px; }
#columnRight .columnIn { padding: 0 0 0 10px; }
Zur Info: Die Seite hat u.a. 3 Spalten (die mittlere ist flexibel in der Breite), die linke und rechte Spalte (fixe Breiten) sind absolut positioniert (left und right). Die mittlere hat keine fixe Positionierung. Das HTML-Gerüst muss so bleiben, denn nur so habe ich ein flexibles Layout mit 3 Spalten, dass meiner Meinung nach das beste zur Zeit zu emfhelende Modell ist das ohne irgendwelche Hacks in allen erdenklichen Systemkonstellationen ordentlich funktioniert.
Was jetzt in Firefox 1.04 und Opera 7.5 passiert ist (vielleicht auch noch wo anders), dass 'bg_contentright.gif' nur bis zum Ende des Browserfensters gestreckt wird, was auf den ersten Blick gewünscht wird, doch falls man horizontale Scrollbalken hat und nach unten scrollt hört der Hintergrund auf. Er erstreckt sich also nur auf den ersten Blick auf 100%.
Im Anhang ein Bild, dass das etwas näher veranschaulicht.
Gibt es denn eine Möglichkeit im body- und html-Tag background-Bilder einzubinden? Hatte bei mir in einigen Browsern nicht geklappt.