nicht angemeldet
100% height von "fakebody"
Hallo,
Ich möchte den Hintergrund einer Website mit Javascript (opacity) wechseln lassen. Ich hab dann einen fakebody angelegt der eine height von 100% hat (html, body haben auch 100%).
Das ganze funktioniert auch aber wenn man nach unten scrolled bei kleinen Bildschirmen wird der Hintergrund nicht mehr angezeigt. Vergroessert man das Browserfenster dahingegen wird der Hintergrund schon angezeigt.
html{
height:100%;
}
body {
height:100%;
}
.container {
margin:160px auto 0;
text-align:left;
width:960px;
background:#fff;
display:block;
position:relative;
}
#fakebody {
margin: 0 auto;
height: 100%;
position: absolute;
width: 100%;
display: block;
top:0px;
background: url(image.jpg) no-repeat;
background-position:center top;
}
<div id="fakebody"></div>
<div class="container">
content
</div>
So weit ich weiß ist es nicht möglich um das background-image eines bodies faden zu lassen, daher die komplizierte Konstruktion. Mir faellt eigentlich nur die Lösung ein um dem body overflow:hidden zuzuweisen und sich qua groesse des Designs zu beschränken. Aber na ja... Das ist halt nicht so schön...
Hat jemand eine andere Idee oder mach ich einfach nur was verkehrt?
gr Volkan
-
So weit ich weiß ist es nicht möglich um das background-image eines bodies faden zu lassen, daher die komplizierte Konstruktion. Mir faellt eigentlich nur die Lösung ein um dem body overflow:hidden zuzuweisen und sich qua groesse des Designs zu beschränken. Aber na ja... Das ist halt nicht so schön...
was willst du eigentlich genau bewerkstelligen? du hast <html /> und <body /> als elemente zur verfügung, reichen die für dein vorhaben nicht?
-
was willst du eigentlich genau bewerkstelligen? du hast <html /> und <body /> als elemente zur verfügung, reichen die für dein vorhaben nicht?
Hallo,
ich moechte onclick das "body" oder "fakebody" background-image langsam mit Javascript auf opacity: 0 faden lassen und danach ein neues Bild wieder einblenden. Wenn ich das mit dem body element mache wird alles ein / aus gefaded und kommt es zu allen moeglichen anderen Fehlern.
gr Volkan
-
-
Hi,
Ich möchte den Hintergrund einer Website mit Javascript (opacity) wechseln lassen. Ich hab dann einen fakebody angelegt der eine height von 100% hat (html, body haben auch 100%).
Das ganze funktioniert auch aber wenn man nach unten scrolled bei kleinen Bildschirmen wird der Hintergrund nicht mehr angezeigt.
Natuerlich, 100% Viewportgroesse sind nun mal eben 100%.
Ich wuerde vorschlagen den body (*Mindest*hoehe 100%) relative positionieren, und darin das Element absolute mit top und bottom 0 - das macht es dann in aktuellen Browser so hoch, wie body insgesamt ist. Im IE 6 funktioniert das noch nicht - aber das waere mir egal.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“