salve a tutti!
sono nuovo del forum, così come del linguaggio html e css. sto facendo degli esperimenti per prendere confidenza con i linguaggi e mi sono stupidamente incastrato su una sciocchezza.
in pratica ho scritto il codice di una semplice pagina con header nav un paio di section e il footer.
ho provato a mettere come sfondo dell'header un immagine stretta e lunga e ripetuta per tutto l'header con repeat-x. impostato le sovrapposizioni con index-z ecc...

al momento di visualizzarlo nel browser ecco la sorpresa: l'header sparisce! e se rimuovo il tag dell'immagine ritorna.
proprio non capisco dove sbaglio!
chi mi da una mano? questi sono le parti di codice html e css:

HTML:
codice:
<!DOCTYPE html>


<html>
    <head>
    <meta charset="utf-8">
        <link rel="icon" href="img/banner.png">
        <style type="text/css">
            @import url("css/stile1.css");
        </style>
            <title> hostyle.tv </title>
    </head>
    
    <body>
        <header id="header">
                <nav id="nav">
                </nav>
        </header>
E CSS:

codice:
#header{
    width: 100%;
    min-height: 90px;
    background: url(img/bg-header.png) repeat-x;
    position: relative;
    z-index: 10;
    
    
}


/*nav*/
#nav{
    width: 80%;
    min-height:80px;
    background:blue;
    color:#ffffff;
    margin: 2% 2% 0 0;
    float: right;
    position: relative;
    
    
}


/*slider*/
#slider{
    width: 100%;
    min-height:350px;
    background:green;
    position: relative;
    margin-top: -90px;
    
}


/*content*/
#content{
    margin: 0 auto;
    width: 90%;
    min-height:200px;
    background:#ff00ff;
    position: relative;
}




/*footer*/
#footer{
    clear:both;
    width: 100%;
    min-height:100px;
    background:#ffff00;
    color: #666666;
    position:relative;
}