✔ Zentrierter Container mit 100% Höhe wird falsch interpretiert

[Adan0s]

Guten Tag,

Ich versuche folgendes Layout mit CSS und ohne Tabellen umzusetzen:
.

Was ich erreichen möchte:

1.) Der obere, horizontale Background soll im Abstand von 30px wiederholt werden, um so komplett an die Breite des Browsers orientiert zu sein.

2.) Der mittlere, zentrierte, 562px breite Background soll vertikal 100% wiederholt werden, um sich an die Höhe des Browsers bzw bei ausreichend Inhalt über die aktuelle Höhe des Browsers hinaus zu orientieren. Ist weniger Inhalt als die aktuelle Browserhöhe vorhanden, soll er trotzdem bis zum unteren Rand des Fensters dargestellt werden.

3.) Der mittlere Hintergrund darf nicht in den oberen, freien 30px des body-Backgrounds erscheinen.

Mein aktueller Code ( siehe Anhang anzeigen neu.zip ) ermöglicht mir den ersten, sowie den dritten Punkt. Am zweiten Punkt hingegen scheitere ich, da das Element zwar die 100% richtig interpretiert, jedoch die Höhe des oberen Hintergrundes sowie den Abstand zum oberen Fensterrand dazu addiert. (100% + 180px)

Meine Frage:
Wie ist es möglich, den mittleren Hintergrund wie von mir in Punkt 2 beschrieben zu wiederholen?

MfG,
Sven

 

[Maik]

Hi,

versuch es mal auf diese Weise:

<div id="wrapper">
     <div id="blanko"></div>
     <div class="topbg"></div>
     <div class="container"></div>
</div>

* {
margin: 0;
padding: 0;
font: bold 1em verdana, sans-serif;
}

html, body {
        height: 100%;
        background: #393939 url(bg.gif) repeat;
}

#wrapper {
min-height:100%;
height:auto !important;
height:100%;
background: url(midbg.png) repeat-y center top;
}

#blanko {
background: #393939 url(bg.gif) repeat;
height:30px;
}

.topbg {
background: url(topbg.png) repeat-x;
height:150px;
}

.container {
margin:auto;
width:562px;
text-align:left;
}

 

[Adan0s]

Unglaublich, es klappt!

Ich danke dir vielmals, besonders auch noch für so eine schnelle Antwort.