Danke schon mal für eure Tipps
Hintergrund ist Folgender. Ich bastel grade eine kleine Seite die ganz oben ein Menü beinhaltet (100% Breite), darunter soll ein Head-Bereich (Hintergrundbildbild + Logo) folgen mit ebenfalls 100% Breite und darunter der Content-Bereich, in einem zentrierten Wrapper, mit eben keinen 100% Breite sondern z.B. nur 70%. Meine erste Version hatte ich das Hintetgrundbild einfach im body per CSS platziert und das Logo als Bild darüber. Das Blöde dabei ist das es so quasi ja kein Inhaltselement ist das den Content im Wrapper nach unten drückt wenn ich z.B. das Browserfenster vergrößere. Bei dem Beispiel von oben funktioniert das ja aber. Also fließend und responsive.
Ich schau mir das nun mal an wie die das gemacht haben.
PS: Ich glaube der Trick ist das es in einem iFrame liegt, mit der Höhe?
Oke wenn das so ist vertraue ich lieber auf eine eigene Lösung...
edit: So was in der Art
[src=html4strict]<body>
<div class="header background">Logo</div>
<div id="pagewrap">
<div>
<h1 id="home">Überschrift</h1>
Lorem ipsum dolor sit amet in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</div>
</div>
</div>
</body>[/src]
[src=css]html, body {
height: 100%;
width: 100%;
}
#pagewrap {
padding: 5px;
max-width: 900px;
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
}
.header {
display: inline-block;
position: relative;
height: 360px;
width: 100%;
top: 100px;
}
.background {
background-image: url(background.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
}[/src]
Funktioniert zwar vom Prinzip her, wenn das Browserfenster allerdings größer oder kleiner wird bleibt der Inhalt im Wrapper ja immer an der selben Stelle.
