Dreiteiliger vertikaler Background

[Detlef G.]

Hallo Thrust

Hier die Background-images:

Danke, damit kann man sich noch besser vorstellen, wie es aussehen soll.
Allerdings sehen die irgendwie unvollständig aus, wodurch sich mir die Frage stellt, ob deine Zuordnung von Hintergrundbildern zu den Seitenelementen wirklich optimal ist.

Danke für den Tipp mit margin: auto;! Der ist super, ich hatte mich schon oft gefragt, wieso horizontalen zentrieren so komplizierten code erfordert.

So ähnlicher oder anderer ähnlich komplizierter Code ist notwendig, wenn eine vertikale Zentrierung gewünscht ist.

Wie meinst du das mit den negativen Margins?

ungefähr so:

#content_begin {  
  margin-top:-321px;        /* entsprechend margin + padding zurück */  
  background: url(images/content_begin.png) no-repeat left top;  
}  
  
#content_middle {  
  margin:320px 0 249px 0; /* die Höhe der oberen und unteren Grafik Platz lassen */  
  padding:1px 0;          /* collapsin-margins vermeiden */  
  background: url(images/content_middle.png) repeat-y;  
}  
  
#content_end {  
  margin-bottom:-250px;  /* entsprechend margin + padding zurück */  
  min-height:571px;      /* Mindesthöhe damit nichts abgeschnitten wird */  
  background: url(images/content_end.png) no-repeat left bottom;  
}  
* html #content_end {    /* Mindesthöhe für alte IEs */  
  height:571px;  
}

Ob das so in allen relevanten Browsern funktioniert oder noch Anpassungen nötig sind solltest du noch testen.

Auf Wiederlesen
Detlef