Mettre une image en background d'un menu

**salifdiguel** · 15/09/2021, 05h08

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

**darkstar123456** · 15/09/2021, 08h47

Bonjour,

Pourriez-vous être plus précis quand vous dites "bien placer l'image" ?

Actuellement vous dites des choses qui ne sont pas possibles : que l'image prenne toute la hauteur de la fenêtre mais qu'elle ne se réduise pas quand on réduit la taille de la fenêtre.
De plus, cette image doit se placer par rapport à quoi ? Le menu ou la page ? Ca porte à confusion entre ce que vous faites et ce que vous voulez obtenir je pense.

Je vous conseille de retirer la balise <img> que vous avez mise et d'utiliser plutôt les propriétés CSS background qui sont plus indiquées pour ce que vous souhaitez faire je pense.

Habituellement, on met une image de fond et on met sa taille de type cover afin de dire qu'on souhaite que le navigateur se débrouiller pour que tout le bloc soit recouvert (le bloc ici est <body>)
Voici un exemple : https://codepen.io/DarkStar123456/pen/RwgLOwL

NB : On ajoute min-height: 100vh; sur body pour être certain de la hauteur minimum et que notre image recouvrira tout l'écran
NB : Si vous souhaitez que l'image s'affiche dans une proportion définie, vous pouvez utiliser background-size et soit y définir une largeur ou hauteur fixe ou en pourcentage. Par exemple background-size: auto 100%; pour 100% de la hauteur de l'écran.

**salifdiguel** · 15/09/2021, 10h23

Bonjour Monsieur darkstar123456
Enormément merci pour votre prompte réaction et surtout pour code exemple qui me permettent d'avancer. Pour être précis, je dirai que votre exemple répond à mon besoin d'image de fond qui garde sa hauteur même sur des écrans mobiles. La préoccupation qui me reste actuellemnt est de pouvoir placer le menu au centre de l'écran autant verticalement que horizontalement. Pour cela j'ai mis margin-left: auto; et margin-right: auto; pour centrer horizontalement. ensuite j'ai mis margin-top : 20vh; pour avoir le menu un peu décalé du haut. J'aurais aimé qu'il soit toujours centré verticalement.
Encore merci pour votre aide et vos remarques pertinentes qui m'ont beaucoup permis d'arriver à là. Si je peux avoir un dernier coup de pouce pour le centrage vertical je suis preneur.
Une fois de plus merci.

**darkstar123456** · 15/09/2021, 10h54

Bonjour,

OK pour l'image de fond.

Pour le centrage c'est bizarre comme volonté.
En effet, le centrage vertical va forcément provoqué le déplacement vertical du menu dès qu'on va ouvrir/fermer un élément.

Mais bon, pour ce faire il existe 2 méthodes :

1. Position absloute
Attention, ça veut dire que tous les contenus vont "sortir du flux" donc si vous ajoutez du contenu, il se trouvera par-dessus ou par-dessous le menu.
Je vois d'ailleurs qu'il y a déjà du position absolute dans votre code.
Pour faire simple, supprimez position: relative de .second, supprimez le width & height 100% de .texte (assez mauvais nom de classe

) ensuite il suffit de positionner votre bloc au centre verticalement (top: 50%; et horizontalement (left: 50%;) .
Enfin, vu que le positionnement se fait par le point super gauche du bloc, il faut donc déplacer vers la gauche et le haut de la moitié : transform: translate(-50%, -50%);.
Exemple : https://codepen.io/DarkStar123456/pen/gORGNmg

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*
on vire tout ça qui sert à rien
.second img{
	width: 100%;
}
.principal {
	width: 100%;
}
.second {
	width: 100%;
	position: relative;
}
*/
.texte {
	position: absolute;
	font-size: 14px;
	font-family: agency fb;
	background:linear-gradient(rgba(255,0,0,.4));
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2. Utiliser Flexbox
Grâce à Flexbox, il suffit de définir un parent en tant que display: flex; et lui définir une hauteur (height: 100vh;) après on a qu'à écrire : justify-content: center; align-items: center.
Exemple : https://codepen.io/DarkStar123456/pen/QWgqXMm

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.texte {
	font-size: 14px;
	font-family: agency fb;
	background:linear-gradient(rgba(255,0,0,.4));
  display: flex;
  height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
}

**salifdiguel** · 15/09/2021, 13h12

Salut, merci à vous pour les bonnes observations et les rappels de cours. Vraiment merci pour les codes et les exemples, merci de m'avoir permis d'arriver à ce que je veux faire. Vos contributions sont toujours très bonnes.
Grandement merci à vous.

Mettre une image en background d'un menu

CSS

Discussions similaires

Partager

Partager