Problème étrange body height:100%

Sujet résolu

6 juin 2018 à 12:45:05

J'ai un problème assez étrange sur mon code HTML/CSS de mon site.

J'ai un one-page avec des sections de la hauteur de l'écran (body est en height:100%). La 1ere section est height:100% et les autres sont en min-height:100% car le contenu dépasse. Dans cette 1ere section j'ai une image que j'ai mis en background.

Mon code :

<!DOCTYPE html>
<html style="height:100%;">
  <head>
    ...mon code...
  </head>

  <body style="height:100%;">

    <div class="section_top">
        <div class=img_fond></div>

        <a class="js-scrollTo" href="#page-1">
          <div class=round_bottom>
            <div></div>
          </div>
        </a>
    </div>

  </body>
</html>

.section_top{
  height:100%;
  background-color:#d84642;
}
  .section_top .img_fond{
    height:82%;
    width:auto;
    background-image:url(asset-path("IMG/fond_pg_festival.png"));
    background-repeat: no-repeat;
    background-size:contain;
    background-position:center 10%;
  }
  .round_bottom{
    height:80px;
    width:80px;
    border-radius:50%;
    background-color:#fff;
    position:absolute;
    bottom:20px;
    left:50%;
    transform: translateX(-50%);
  }
    .round_bottom div{
      margin:30px auto 0 auto;
      width:0px;
      border:26px solid transparent;
      border-top:26px solid #d84642;
    }

Au 1er chargement de la page ma section_top n'est pas prise en compte mais chose surprenante, quand j'actualise la page celle ci apparaît avec mon image en background. J'ai tenté de passer mon background-image en balise <img /> via mon code HTML et la au 1er chargement mon image est IMMENSE et quand j'actualise hop tout revient à la normal...

Et quoi qu'il arrive .roud_bottom elle se place très bien et ne bouge jamais...

Franchement la je bloque... du coup je sollicite votre aide :)

-
Edité par Coeurcoeur 6 juin 2018 à 12:45:21

"Les plus beaux voyages se font par la fenêtre" Le Roi de Coeur (1966)

Skull-dragon

6 juin 2018 à 13:37:48

Salut et si tu tente sa

   html,body{
       margin: 0;
       padding: 0;
       height: 100vh;
   }

   .section_top .img_fond{
       height: 100vh;
       background:url("http://lorempicsum.com/futurama/627/300/4") no-repeat center;
       background-size:cover;
   }
   .section .img_fond1{
       height: 100vh;
       background:url("http://lorempicsum.com/futurama/627/300/3") no-repeat center;
       background-size:cover;
   }

<!DOCTYPE html>
<html lang="fr">
<head>

</head>

<body>

<div class="section_top">
    <div class=img_fond></div>
    <a class="js-scrollTo" href="#section2">
        <div class=round_bottom>
            <div></div>
        </div>
    </a>
</div>
    <div id="section2" class="section">
        <div class=img_fond1></div>
    </div>
</body>
</html>

Il se passe quoi pour toi ?

Coeurcoeur

6 juin 2018 à 14:06:26

Ça à l'air top ! Merci l'ami !!

"Les plus beaux voyages se font par la fenêtre" Le Roi de Coeur (1966)