• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Bild in Hintergrund nehmen

A

adiberg

Neues Mitglied
Guten Tag,

ich hab ein Problem und zwar will ich, dass ein Bild was ich auf meiner Html Seite hab in den Hintergrund versetzt wird, sobald ein Dropdown Menü davor kommt. Ich hab
die 2 Bilder mal eingefügt. Beim 2. Bild ist das Image vor den Punkten des Dropdown Menüs. Wie kann ich es einstellen in CSS, dass sobald ich das Menü öffne das Bild in den Hintergrund verschwindet? Über dem Punkt Kontakt ist nämlich noch ein Menüpunkt.
Unbenannt.PNGUnbenannt1.PNG
 
Vermutung: der z-Index des Dropdowns stimmt nicht. Es wäre besser, wenn du uns einen Link zur Seite geben würdest, damit man sich das ansehen kann.
 
CSS: 
html, body {
    height: 100%;
    width: 100%;
    background-color: grey;
}

html {
    font-family: Arial, Helvetica, sans-serif;
}

#navigation {
    text-align: center;
}

#navigation a {
    color: white;
    background-color: black;
    border-radius: 20px;
    padding: 6px;
    text-decoration: none;
}

#navigation a:hover {
    padding-top: 10px;
    padding-bottom: 10px;
}
.nav {
    border-bottom: 1px solid black;
    text-align: right;
    height: 70px;
    line-height: 70px;

}

.menu {
    margin: 0 30px 0 0;
    text-align: center;
    
}

.menu a {
    clear: right;
    color:white;
    margin: 0 10px;
    line-height: 70px;
    background-color: black;
    border-radius: 20px;
    padding: 6px;
    text-decoration: none;
    
}

.menu a:hover {
    padding-bottom: 10px;
    padding-top: 10px;
}

label {
    margin: 0 40px 0 0;
    font-size: 26px;
    line-height: 70px;
    display: none;
    width: 26px;
    float: right;

}

#toggle {
    display: none;
}

@media only screen and (max-width: 800px) {
    label {
        display: block;
        cursor: pointer;
    }

    .menu {
        text-align: center;
        width: 100%;
        display: none;
        
    }

    .menu a {
        display: block;
        margin: 0;
        border-bottom: 1px black;
        background-color: transparent;
        color: black;
    
    }

    #toggle:checked + .menu {
        display: block;
    }

    
}

#image img {
    width: 80%;
    height: auto;
    margin-top: 16px;
    margin-bottom: 16px;
    display: block;
    margin: 20px auto;
}
HTML: 
<!DOCTYPE html>

<html>
    <head>
        <title>The Bergmann Method </title>
        <link rel="stylesheet" href="main.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div id="top">
            <br>
            <div id="navigation">
                <img src="deutschland.png" alt="Deutsch">
                   <a href="#">Deutsch</a>
                <img src="england.png" alt="Englisch">
                   <a href="#">Englisch</a>
                   <br>
                   <br>
                   <br>
            </div>
        </div>
    <div class="nav">
        <label for="toggle">&#9776;</label>
        <input type="checkbox" id="toggle">
        <div class="menu">
            <a href="#">Über Mich</a>
            <a href="#">Services</a>
            <a href="#">Kontakt</a>
            <a href="#">Shop</a>
            <a href="#">The Bergmann Method</a>
            <a href="#">Meine Lizenzen</a>
        </div>
    </div>
    <div id="image">
        <img src="image9.jpg.png" alt="The Bergmann Method">
    </div>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben