Click here to Skip to main content
15,033,219 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
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:
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:
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
Posted
Updated 23-Sep-13 8:01am
v2
Comments
Sergey Alexandrovich Kryukov 23-Sep-13 14:14pm
   
This is quite possible with absolute positioning, which sounds quite questionable to me. Why? Anyway, with absolute, it's possible to overlay anything over anything. You would just need to perform your calculations more accurately. So, what prevents you from doing so? Do you have any particular concerns?
—SA

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900