HTML/CSS Hintergrund 2 farbig

Computer: Software & Programmierung HTML & CSS
#1

Ich möchte eine Seite erstellen, die einen farblich geteilten Hintergrund hat. z.B oben hell unten dunkel.
Der obere helle Streifen soll 200px hoch sein. Der untere je nach Länge der Seite. Beide sollen aber immer die maximale Breite haben. Die Bilder liegen auf der Trennlinie und sollen zentriert bleiben, also von oben ca. 150 px horizontal mittig. Ist das verständlich?
Habe mit divs experimentiert:

body {
text-align: center;
background-color: #000000;
} /* Zentrieren von nachfolgenden DIV-Blöcken */

.orange {
margin: 0 auto;
visibility: visible;
height: 200px;
width: 100%;
top: 0px;
background-color: #FF6600;
}
aber das streckt den orangen Block nicht.
Soll ich lieber Tabellen nehmen?

#2

Hi!

Erstelle eine Grafik: 1px breit, 200px hoch und eingefärbt in der oberen Hintergrundfarbe. Die legst Du per CSS als Hintergrundgrafik fest und kachelst sie nur horizontal (background-repeat:repeat-x). Die zweite Farbe legst Du einfach über die Hintergrundfarbe fest.

Gruß, Caro

#3

Genial!
Das Leben kann so einfach sein!
Caro, Dir einen schönen Tag!
Danke!
Susi

#4

Ich verstehe das so: du hast 2 divs. je eine Hintergrundsfarbe und ein Bild im 2ten div, dass du in der Mitte der Beiden anzeigen möchtest. Versuche es mal in diese Richtung…

.orange{
height: 200px;
width: 100%;
background:orange;
}

.blue{
height: 200px;
width: 100%;
background:blue;
}
.blue img{
position:relative;
top:-150px;
}

Das HTML könnte so aussehen: