Image arrière plan DIV

Alexandre Garet
Les bases HTML/CSS

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;

}

Entourez votre code pour bien le mettre en forme

Ce que je veux

Décrivez ici ce que vous cherchez à obtenir

Ce que j'obtiens

Décrivez ici vos erreurs ou ce que vous obtenez à la place de ce que vous attendez :(

1 réponse

Eliott Begault

Bonjour,
pourquoi ne pas héberger ton fichier ave un lien WEB et entrer la commande suivante ? : background-image: url(lien_image); ????
Je te fais aussi remarquer qu'il manque une apostrophe pour fermer une de tes puces, ce qui supprime une partie du code...
Enfin, tu as tout simplement oublié de fermer ta div (</div> !!!)
Bonne journée !