18008 sujets

Questions générales et questions de débutants

[Résolu] Mettre une image en arrière plan DIV

Bonjour,

Je rencontre un problème sur un des site que je fais pour m'amuser.
Je voudrai mettre plusieurs images sur la page pour mettre plus de texte etc... pour ça je sais qu'il faut créer une div, mais le problème quand je fais:

<div class="image1">
<img src="partie 1">
</div>

l'image apparaît au dessus de mes autres div, notamment celle du menu déroulant, et je voudrai qu'elle passe en arrière plan, mais je n'y arrive pas, j'ai beau chercher sur internet, ça ne marche pas. En trifouillant le code dans CSS je n'y arrive pas, j'ai essayé avec un overflow, un z-index, mais rien n'y fais.
Alors auriez-vous la solution?

HTML:

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>League of Legend</title>
<link rel="stylesheet" type="text/css" href="style.css"/>

</head>

<body>
<header>
<h1>Venez jouer avec nous!</h1>
</header>

<div class="menu">
<ul id="menu-demo2">
<li><a href="https://merch.riotgames.com/fr-fr/category/apparel">Les vêtements ?</a>
<ul>
<li><a href="https://merch.riotgames.com/fr-fr/category/tops">Les hauts</a></li>
<li><a href="https://merch.riotgames.com/fr-fr/category/bottoms">Les bas</a></li>
<li><a href="https://merch.riotgames.com/fr-fr/category/hoodies-jackets">Pulls à capuche et vestes</a></li>
<li><a href="https://merch.riotgames.com/fr-fr/category/hats-and-beanies">Chapeaux et bonnets</a></li>
<li><a href="https://merch.riotgames.com/fr-fr/category/jewelry">Les bijoux</a></li>
</ul>
</li>
<li><a href="https://merch.riotgames.com/fr-fr/category/collectibles">Les objets de collection ?</a>
<ul>
<li><a href="https://merch.riotgames.com/fr-fr/category/figures">Figurine</a></li>
<li><a href="https://merch.riotgames.com/fr-fr/category/statues">Les statues</a></li>
<li><a href="https://merch.riotgames.com/fr-fr/category/pins">Les Pin's</a></li>
<li><a href="https://merch.riotgames.com/fr-fr/category/plush">Les peluches</a></li>
<li><a href="https://merch.riotgames.com/fr-fr/category/board-games">Les jeux de plateaux</a></li>
</ul>
</li>
<li><a href="https://merch.riotgames.com/fr-fr/category/accessories">Les accessoires ?</a>
<ul>
<li><a href="https://merch.riotgames.com/fr-fr/category/mugs">Les Tasses</a></li>
<li><a href="https://merch.riotgames.com/fr-fr/category/mousepads?">Les tapis de souris</a></li>
<li><a href="https://merch.riotgames.com/fr-fr/category/posters">Les posters</a></li>
<li><a href="https://merch.riotgames.com/fr-fr/category/other">Autre truc cool</a></li>
</ul>
</li>
<li><a href="https://play.euw.leagueoflegends.com/fr_FR">Plus d'infos ?</a>
<ul>
<li><a href="https://signup.euw.leagueoflegends.com/fr/signup/index#/">Inscription</a></li>
<li><a href="https://signup.euw.leagueoflegends.com/fr/signup/redownload?page_referrer=index">Télécharger le jeu windows</a></li>
<li><a href="https://lol.secure.dyn.riotcdn.net/channels/public/x/installer/current/live.euw.zip">Télécharger le jeu Mac</a></li>
<li><a href="https://www.youtube.com/user/RiotGamesInc">La chaine Youtube</a></li>
</ul>
</li>
</ul>
</div>

</body>
</html>




CSS:

*{
margin: 0px;
padding: 0px;
}

body{
background-color: black;
background:no-repeat url("https://thumbor.sd-cdn.fr/Jrm2oSEvQ7gKvr7BxokxOm35cVY=/940x550/cdn.sd-cdn.fr/wp-content/uploads/2019/07/league-of-legends-mobile.jpg");

background-size: cover;
}

h1{
background: transparent;
z-index: 2;
position: absolute;
text-align: center;
font-family: Georgia;
font-size: 50px;
margin: 0 auto;
padding:0 auto;
left: 0;
right: 0;
top: 85%;
color: rgb(0, 255, 221);
width: 70%;
text-decoration: underline;
}



.menu{
width: 100%;
border: 1px solid #333;
box-shadow: 8px 8px 5px rgba(16, 116, 141, 0.699);
padding: 0px 0px auto;
margin: 0 auto;
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.500), rgb(0, 0, 0, 0.500) 40%, rgb(0, 0, 0, 0.500));

}

#menu-demo2, #menu-demo2 ul{
padding:0;
margin:auto;
list-style:none;
text-align:center;

}
#menu-demo2 li{
display:inline-block;
position:relative;
border-radius:0px 0px 0 0;

}
#menu-demo2 ul li{
display:inherit;
border-radius:0;
}
#menu-demo2 ul li:hover{
border-radius:0;
}
#menu-demo2 ul li:last-child{
border-radius:0 0 0px 0px;
}
#menu-demo2 ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu-demo2 li:hover ul{
max-height:15em;
}
/* background des liens menus */
#menu-demo2 li:first-child{
background-color: transparent;
background-image:-webkit-linear-gradient(top, transparent 0%,transparent 100%);
background-image:linear-gradient(to bottom, transparent 0%, transparent 100%);
}
#menu-demo2 li:nth-child(2){
background-color: transparent;
background-image:-webkit-linear-gradient(top, transparent 0%,transparent 100%);
background-image:linear-gradient(to bottom, transparent 0%, transparent 100%);
}
#menu-demo2 li:nth-child(3){
background-color: transparent;
background-image:-webkit-linear-gradient(top, transparent 0%,transparent 100%);
background-image:linear-gradient(to bottom, transparent 0%, transparent 100%);
}
#menu-demo2 li:last-child{
background-color: transparent;
background-image:-webkit-linear-gradient(top, transparent 0%,transparent 100%);
background-image:linear-gradient(to bottom, transparent 0%, transparent 100%);
}
/* background des liens sous menus */
#menu-demo2 li:first-child li{
background:rgba(0, 0, 0, 0.5);
}
#menu-demo2 li:nth-child(2) li{
background:rgba(0, 0, 0, 0.5);
}
#menu-demo2 li:nth-child(3) li{
background:rgba(0, 0, 0, 0.5);
}
#menu-demo2 li:last-child li{
background:rgba(0, 0, 0, 0.5);
}
/* background des liens menus et sous menus au survol */
#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
background:white;
}
#menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
background:white;
}
#menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
background:white;
}
#menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
background:white;
}
/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:10px 32px;
color: white;
font-family:arial;

}
#menu-demo2 ul a{
padding:10px 0;
}
#menu-demo2 li:hover li a{
color:white;
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#000;
}
J'ai trouvé la solution! Il suffisait de mettre la div en bas du code dans HTML pour respecter l'ordre dans lequel tout doit apparaître.
Merci pour le post, j'avais le même soucis que toi. Du coup, j'ai corrigé, et ça marche aussi Smiley smile
Sujet clos
Aller à