Webseiten-background links und rechts..

[Gunnar Bittersmann]

@@botl1k3:

ich habe einen zentrierten Inhalt mit einer fixen breite.
Das ist schlecht.
Da hast du wohl Recht, doch ich schreibe die Seite für einen bekannten und der WILL es so, also mache ich es so..

Warum? Es geht doch besser: Einfach statt 'width' die Eigenschaft 'max-width' verwenden*, dann ist der Text auch in schmalen Viewports gut zu lesen.

Wenn der background-image zu kurz ist, sieht man die background-color (Absicht).

Kein Problem*:

html  
{  
 background: #048 url(background-left) repeat-x;  
 margin: 0;  
 padding: 0;  
}  
  
head /* irgendein Element muss ja das rechte Hintergrundbild haben ;-) */  
{  
 display: block;  
 background: url(background-right) repeat-x;  
 margin: 0 0 0 50%;  
 width: 50%;  
 height: 42px; /* Höhe von 'background-right' */  
}  
  
head *  
{  
 display: none;  
}  
  
#content  
{  
 background: #F00;  
 margin: -42px auto 0 auto; /* um Höhe von 'background-right' nach oben schieben */  
 max-width: 42em;  
 padding: 1em;  
}

Live long and prosper,
Gunnar

* Wir reden von Browsern mit mehr als nur rudimentalen CSS-Fähigkeiten. Auf Hacks für IEs hab ich keinen Bock.