background bild strecken

  • Hallo
    ich mochte auf meiner page das bg immer als vollbild haben (unabhänging von auflösung etc.)
    Ich habe mir was zusammengesucht das mit ein paar kleinen problemen auch funktioniert: wenn ich das browser fenster kleiner mache wird das bild wie gewünscht skaliert und wenn ich dann auf vollbild zurückwechsel ist immer der navi bar da und verschwindet erst wieder bei einem reload dann skaliert auch wieder der bg. bei ersten aufruf funzt jedoch alles. wie kann ich das in den griff kriegen? danke!

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <style type="text/css">
    html {height:100%;}
    body {height:100%;margin:0;padding:0;}
    #bg {position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;}
    #content {position:absolute;width:100%;z-index:1;left:0;top:0;}

    #title {text-align:center; margin-top:1%; margin-bottom:8%}
    hr {margin-top:1em; height:2px; width:90%; border:1px solid white; color:white; background-color:white}
    #links {text-align:center}
    #links img {margin:1%}
    #downform {margin-top:0.3%}
    .team {text-align:center}
    .team img {margin:0 0.7% 1%}
    #forum {margin: 20% 0; text-align:center}
    #buttons {text-align:center; width: 100%; margin-bottom:2.2%}
    #disclaimer {text-align:center}
    #buttons img {margin:0 25px}
    #seasonalgifs {text-align:center; width:100%}
    #bottom {text-align:center; margin-top:0.5%; padding:0}
    #formular {text-align:center}
    img {border:none 0; padding: 0; behavior:url("pngbehavior.htc")}
    li {text-align:center; list-style-type:none}
    #footer {text-align:center; margin:2% 0; padding:2%}
    a:link { font-family:'Verdana';font-weight:bold; font-size:1.5em; color:#fff; text-decoration:none; outline-style:none}
    a:visited { font-family:'Verdana'; font-weight:bold; font-size:1.5em; color:#000; text-decoration:none; outline-style:none}
    a:focus { font-family:'Verdana'; font-weight:bold; font-size:2em; color:#e41; text-decoration:none; outline-style:none}
    a:hover { font-family:'Verdana'; font-weight:bold; font-size:2em; color:#e41; text-decoration:none; outline-style:none}
    a:active { font-family:'Verdana'; font-weight:bold; font-size:2em; color:#e41; text-decoration:none; outline-style:none}
    form {font-family:'Verdana'; color:#fff; font-size:1em; font-weight:bold}
    form p {text-align:center}
    #banner {text-align:center}
    #banner img {margin: 2%}


    </style>

    <script type="text/javascript">
    <!--
    function setHeight(){
    var thebg=document.getElementById('bg').offsetHeight;
    var theheight=document.getElementById('content').offsetHeight;
    if(theheight > thebg){
    document.getElementById('bg').style.height=theheight+'px';
    }
    }
    window.onload=setHeight;
    window.onresize=setHeight;
    //-->
    </script>

    </head>

    <body>

    <div id="content">

    <div id="title">
    </div>

    <div id="buttons">





    </div>

    <div id="seasonalgifs">

    </div>

    <div id="bottom">
    </div>

    <div id="counter">
    <?php
    include('counter/counter.php');
    ?>
    </div>


    </body>
    </html>

    </div>

    </body>
    </html>