Mettre une image comme background d'un menu

Diguel
Les bases HTML/CSS

**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>

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;
}
...
Ce que je veux

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.

Ce que j'obtiens

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. :(

Aucune réponse