Partage
  • Partager sur Facebook
  • Partager sur Twitter

Placer une image en background derrière mon menu

Sujet résolu
    14 septembre 2021 à 13:50:23

    Bonjour, j'ai trouvé un joli menu que j'aimerais utiliser sur la page d'accueil de mon site. Cependant, je tente de placer une image d'arrière-plan, mais cela ne fonctionne pas bien. Lorsque je fais l'overlay, le menu ne se place pas bien et en vue adaptative, l'image se réduit et le menu se retrouve en dehors en dessous. J'aimerais avoir votre aide pour bien placer l'image pour que le menu reste toujours bien centré autant horizontalement que verticalement. Aussi je voudrais que l'image occupe toujours la hauteur de la fenêtre en vue adaptative sans que sans hauteur ne diminue.

    Merci d'avance pour votre soutien.

    Voici le code du menu d'origine.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link href="fontawesome-free-5.10.2-web/css/all.css" rel="stylesheet">
        <link rel="stylesheet" href="style.css">
        <title>Document</title>
    </head>
    <body>
    <div class="principal">
    	<div class="second">
    		<img src="../accueilp.jpg" alt="école">
    		<div class="texte">
            <div class="menu">
                <ul>
                    <li class="item" id="profile">
                        <a href="#profile" class="btn"><i class="fa fa-user"></i> Profile</a>
                        <div class="smenu">
                            <a href="">Post</a>
                            <a href="">Picture</a>
                        </div>
                    </li>
    
                    <li class="item" id="messages">
                        <a href="#messages" class="btn"><i class="fa fa-envelope"></i> Messages</a>
                        <div class="smenu">
                            <a href="">New</a>
                            <a href="">Sent</a>
                            <a href="">Spam</a>
                        </div>
                    </li>
    
                    <li class="item" id="settings">
                        <a href="#settings" class="btn"><i class="fa fa-cog"></i> Settings</a>
                        <div class="smenu">
                            <a href="">Password</a>
                            <a href="">Language</a>
                        </div>
                    </li>
    
                    <li class="item">
                        <a href="#" class="btn"><i class="fa fa-sign-out-alt"></i> Logout</a>
                    </li>
                </ul>
            </div>
    		</div>
    	</div>
    </div>
    </body>
    </html>

     et le CSS

    .second img{
    	width: 100%;
    }
    .principal {
    	width: 100%;
    }
    .second {
    	width: 100%;
    	position: relative;
    }
    .texte {
    	width: 100%;
    	height: 100%;
    	position: absolute;
    	top: 0px;
    	font-size: 14px;
    	font-family: agency fb;
    	background:linear-gradient(rgba(255,0,0,.4));
    }
    .menu {
        width: 300px;
        border-radius: 8px;
        overflow: hidden;
    }
    
    .item {
        border-top: 1px solid #18dcff;
        overflow: hidden;
    }
    
    .btn {
        display: block;
        padding: 16px 20px;
        background: #17c0eb;
        color: white;
        position: relative;
    }
    
    .btn::before {
        content: "";
        position: absolute;
        width: 14px;
        height: 14px;
        background: #17c0eb;
        left: 20px;
        bottom: -7px;
        transform: rotate(45deg);
    }
    
    .btn i {
        margin-right: 10px;
    }
    
    .smenu {
        background: #333;
        overflow: hidden;
        transition: max-height 0.3s;
        max-height: 0;
    }
    
    .smenu a {
        display: block;
        padding: 16px 26px;
        color: white;
        margin: 4px 0;
        position: relative;
    }
    
    .smenu a::before {
        content: "";
        position: absolute;
        width: 6px;
        height: 100%;
        background: #18dcff;
        left: 0;
        top: 0;
        transition: .3s;
        opacity: 0;
    }
    
    .smenu a:hover::before {
        opacity: 1;
    }
    
    .item:target .smenu {
        max-height: 10em;
    }




    • Partager sur Facebook
    • Partager sur Twitter
    Petit à petit l'oiseau fait son nid.

    Placer une image en background derrière mon menu

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    • Editeur
    • Markdown