Div Content overlays div Header, which is the first and it should not!

See more:

CSS

HTML

HTML5

Hi, I have a small problem. I wanted a background-image in my header, but when I zoomed out the page the background-image didn't fill whole div and background-size:100% does not work, so I decided not to use background-image, but to use z-index.

As a help says I have made the div .Header with the postition:relative, z-index:auto and in this div I have made the div A with position:absolute, z-index:1 and the div B with position:absolute, z-index:2. B overlays A, it is all right. But under the header is the div content, which has position:relative, z-index:auto and it overlays Header, why??????????????????????????????

I have tried probably all the combinations of postion and z-index between these two divs (Header and Content), but it did not work. Please help me how to fix the overlaying of divs!

Here is CSS:

div .Header
{
    width:100%;
    position:relative;
    z-index:auto;
    /*background-image: url("/img/Zermanice5.png");
    background-repeat:no-repeat;
    background-size:100%; */
}
div .HeaderImage
{
    position:absolute;
    z-index:1;
    width:100%;
}
div .HeaderComponents
{
    position:absolute;
    z-index:2;
    width:100%;
}
div .Logo
{

  ...AND SO ON...

div .Content
{
    position:relative;
    width:100;
    z-index:auto;
}
div .DropdownMenu
{
    width:100%;
}
div .MainContent
{
    border-width:1px;
    border-style: groove;
    margin-left: 1.5em;
    margin-right:1.5em;
    margin-top: 1.5em;
    background-color: white;
    color: black;
}

And Here is HTML:

<div class="Header">
            <div class="HeaderImage">
                <img src="/img/Zermanice5.png" border="0" width="100%" height="320em">  
            </div>
            <div class="HeaderComponents">
                 <div class="Logo">
                    <img src="/img/Logo 2014.png" border="0" width="100%" height="100%">     
                </div>
                <div class="MainTitle">
                    <h2 class="navy"> BVC Žermanice</h2>
                    <h5 class="navy" id="HeadSubTitle">  Amatérský beach
                    <br/>  volejbalový klub</h5>   
                    </div>
                <div class="Login">
                    <span>Nejsi přihlášen</span>
                    <form action="">
                        Log in: <input type="text" id="basicInput" name="Username"/>
                        <br/>
                        Heslo: <input type="password" id="basicInput" name="Password"/>
                        <br/>
                        <input type="button" name="btnLogin" value="Přihlásit se!">
                        <br/>
                        <a href="#">Registrace</a> 
                    </form>
                </div>
             
                <div class="Calendar">
                    <?php
                        include("/calendar.php")
                    ?>
                </div>  
                <div id="Action">
                    Dnes:<br/>
                    Žádná akce<br/>
                    Tento týden:<br/>
                    Žádná akce <br/>      
                </div>
                <div class="Credits">
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <a href="https://www.facebook.com/BvcZermanice"><img src="/img/FacebookLikeButton.png" border="0" width="100em" height="33.3em"></a> <br/>
                    Created by <a href="#">Pepin</a> <br/>
                    Photo by © <a href="http://www.jakubchrudina.eu/">Jakub Chrudina</a> 
                </div>
            </div>     
        </div>
        <div class="Content">
           <div class="DropdownMenu">
            <ul id="menu">
                <li><a href="#">Domů</a></li>
                <li><a href="#">O Klubu</a></li>
                <li><a href="#">Uživatelé</a>

Thanks for replies!

Pepin z Hane