Impossible de voir mon background color

Résolu
Bulbichu -  

Bonjour, voici mon souci :

je crée un site sur le body je met une image en background image

mais les div qui vienne par dessus je n'arrive pas a voir mes background-color, je les vois uniquement si je supprime l'image

voici mon code:

les z index sont un essais mais rien n'as changer

HTML:

voici le css:

voici le rendu actuelle :

Merci d'avance a ceux qui pourrons m'aider

3 réponses

  1.  jordane45 Modérateur

    Bonjour,

    Merci de poster ton code en format "texte" ( en utilisant l'icone prévue à cet effet lorsque tu rédiges ton message sur le forum.

    Sans ça.. impossible pour nous de copier ton code pour le tester...

    En ce qui concerne la solution, le z-index est très certainement la bonne piste ..  par contre, pense à bien vider le cache de ton navigateur entre chaque essais..

    0
    1. Bulbichu Auteur

      Je nai pas reussi a modifier le message je colle mon code ici

      HTML :

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Planetary Defense</title>
    <link rel="shortcut icon" type="image/png" href="/images/favicon_P.ico" />
    <link rel="stylesheet" href="/Css/accueil.css" />
  </head>
  <body>
    <header>
      <div class="planete">
        <a href="accueil.html"><img class="img-planete" src="/images/Magor.png" alt="planete magor" /></a>
        <a href="accueil.html"><img class="img-planete" src="/images/Naron.png" alt="planete naron" /></a>
        <a href="accueil.html"><img class="img-planete" src="/images/Neri.png" alt="planete neri" /></a>
        <a href="accueil.html"><img class="img-planete" src="/images/Veles.png" alt="planete veles" /></a>
        <a href="accueil.html"><img class="img-planete" src="/images/Eyeke.png" alt="planete eyeke" /></a>
        <a href="accueil.html"><img class="img-planete" src="/images/Kavian.png" alt="planete kavian" /></a>
      </div>
      <div class="title">
        <img class="img-title" src="/images/banniere_no_contour.png" atl="imagelogo " />
      </div>
      <div class="logout">
        <a class="logout" id="logout" onclick="logout()">
          <img class="img-logout" src="/images/logout.png" atl="bouton delog" />
        </a>
      </div>
    </header>
<div class="full-groupe">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus culpa deleniti 
</div>
  </body>
</html>

      CSS:

      * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-image: url(/images/Magor-bkg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  z-index: 0;
}
/* ===== header  =====*/
header {
  width: 100%;
  display: flex;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.151);
  z-index: 10;
}


.planete {
  width: 20%;
  padding-left: 45px;
}
.img-planete {
  width: 100px;
}

.img-planete:active {
  width: 95px;
}

.title {
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-title {
  width: 700px;
}

.logout {
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-logout {
  width: 100px;
}
.img-logout:hover {
  width: 110px;
}
.img-logout:active {
  width: 100px;
}

/* ==== corps =====*/

.full-groupe{
    width: 100%;
    background-color: rgb(1, 245, 253);
    color: aqua;
}
      0
      1. jordane45 Modérateur

        Dis voir, ça serait plutôt sur le body qu'il faut mettre ton image de fond .. pas sur tous (*) les éléments html de ta page...

        0
        1. bulbichu

          yes exact je te remercie =) cela rend tous de suite mieux 

          0