Mettre une image en background d'un menu
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.
le html
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
| <!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
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
| .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;
} |
