Buongiorno,
stò cercando di creare una pagina dove ci sia un'immagine sfondo che si ridimensioni automaticamente a seconda della dimensione del browser.
Sopra l'immagine vorrei un box centrato nella pagina, semitrasparente, che contenga un blocco di testo.

Quello che sono riuscito a fare:
- l'immagine di sfondo che si ridimensiona
- il box semitrasparente

Quello che non sono riuscito a fare:
- centrare il box nella pagina
- creare le barre di scorrimento al browser nel caso il testo si estenda oltre la pagina

Mi aiutate per favore?
Questa la pagina HTML:


codice HTML:
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Nuova pagina 3</title>
    <base target="_self">
    <link href="css/stili.css" rel="stylesheet" type="text/css">
    <!--[if lt IE 7]>
    <script type="text/javascript" src="js/mootools.js"></script>
    <script type="text/javascript" src="js/core.js"></script>
    <![endif]-->
</head>

<body>
<div id="background">
    <div>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <img src="images/sfondo1.jpg" id="bgk" alt="" />
                </td>
            </tr>
        </table>
    </div>
</div>

<div class="container">
    <div class="content">
        <p>testo molto lungo...</p>
    </div>
</div>
</body>
</html>

Questo il foglio CSS:

codice:
* {
    margin:0;
    border:0;
    padding:0;
}

    html, body,#backgound,#background table,#background td{
    width:100%;
    height: 100%;
    background-color:transparent;
    color:#000;
    overflow:hidden;
}
#background {
    position: fixed;
}
#background td{
    vertical-align:middle;
    text-align:center
}

#background img{
    min-height:50%;
    min-width:50%;
    margin:0 auto
}

#background, #bgk{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:0;
}

#container{
    position:absolute;
    top:0;
    left:0;
    z-index:70;
    overflow:auto;
}

.content{
    position: absolute;
    margin: 0 auto; 
    width: 770px;
    overflow:auto;
    padding-left: 20px;
    padding-right: 20px;
    border-left: 0;
    border-right: 0;
    padding-top: 20px;
    padding-bottom: 100px;
    font: 10px Verdana, Arial;
    background: rgba(255,255,255,0.25);
}

GRAZIE!!!