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