L'image de fond ne couvre pas toute la page?

Question

Je viens de commencer à apprendre le HTML et CSS (et un peu Bootstrap) et j'essaye de faire une simple page de défilement. Mon problème est que je ne peux pas obtenir l'image d'arrière-plan div pour couvrir toute la hauteur de la page - elle couvre seulement le texte h2, comme si elle pensait que la fin de cet élément est la fin de la page. Je n'ai aucune idée de pourquoi c'est ce que je fais et je n'ai pas réussi à le réparer. Cela m'a vraiment bloqué et je suis sûr qu'il a une solution vraiment simple que j'ai manquée. Tout conseil serait grandement apprécié.

Voici le codepen:

body { 
 
    background-color: rgb(255, 255, 255); 
 
} 
 

 
#front { 
 
    background: url("https://image.ibb.co/mjTmwv/port34.png") no-repeat; 
 
    overflow: hidden; 
 
    background-size: cover; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#h1 { 
 
    color: white; 
 
    font-size: 50px; 
 
    margin-top: 40vh; 
 
    padding: 10px; 
 
    background: rgba(43, 142, 255, 0.4); 
 
} 
 

 
#pt { 
 
    color: white; 
 
    font-size: 30px; 
 
    background: rgba(39, 220, 130, 0.4); 
 
}

<ul style="z-index:9;"> 
 
    <li> 
 
    <a class="active" href="#"><img class="img-fluid" style="width:auto;height:auto;max-height:26px;max-width:20px;" src="https://image.ibb.co/mg1s3a/lyreimage27.png" alt="website icon"></img> placeholder inc.</a> 
 
    </li> 
 
    <li><a href="#">About 
 
     </a> 
 
    </li> 
 
    <li><a style="text-decoration:none" href="#">Portfolio</a> 
 
    </li> 
 
    <li><a href="#">Contact</a> 
 
    </li> 
 
</ul> 
 

 
<header> 
 
    <div id="front"> 
 
    <div class="container-fluid"> 
 
     <h1 id="h1" class="text-center">Placeholder</h1> 
 
     <h2 id="pt" class="text-center">Placeholder Text</h2> 
 
</header>

Answer 1

J'ai nettoyé un peu votre balisage (essayez de ne pas utiliser les styles en ligne lorsque cela est possible) et pensez avoir obtenu l'effet que vous recherchez.

#front { 
 
    background: url("https://image.ibb.co/mjTmwv/port34.png") no-repeat; 
 
    overflow: hidden; 
 
    background-size: cover; 
 
    width: 100%; 
 
    min-height: 100vh; 
 
} 
 

 
.text-center { 
 
    text-align: center; 
 
} 
 

 
h1 { 
 
    color: white; 
 
    font-size: 50px; 
 
    margin-top: 40vh; 
 
    padding: 10px; 
 
    background: rgba(43, 142, 255, 0.4); 
 
} 
 

 
h2 { 
 
    color: white; 
 
    font-size: 30px; 
 
    background: rgba(39, 220, 130, 0.4); 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    font-size: 16px; 
 
    z-index: 9; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover:not(.active) { 
 
    color: white; 
 
    background-color: rgba(39, 220, 130, 0.4); 
 
    transition: 0.5s; 
 
    text-decoration: none; 
 
} 
 

 
.active { 
 
    color: white; 
 
    background-color: rgba(43, 142, 255, 0.4); 
 
} 
 

 
.active:hover { 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 

 
.active img { 
 
    width:auto; 
 
    height:auto; 
 
    max-height:26px; 
 
    max-width:20px; 
 
}

<ul> 
 
    <li><a class="active" href="#"><img class="img-fluid" src="https://image.ibb.co/mg1s3a/lyreimage27.png" alt="website icon" />placeholder inc.</a></li> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Portfolio</a></li> 
 
    <li><a href="#">Contact</a> 
 
    </li> 
 
</ul> 
 

 
<header id="front"> 
 
    <div> 
 
    <div class="container-fluid text-center"> 
 
     <h1>Placeholder</h1> 
 
     <h2>Placeholder Text</h2> 
 
    </div> 
 
    </div> 
 
</header>

Answer 2

Votre #front div n'a pas assez de contenu pour afficher la page entière. Vous êtes supposé avoir assez de contenu pour couvrir la page entière ou bien définir background-image pour l'élément body. Sinon, changez votre css #front comme ci-dessous.

#front { 
    background: url("https://image.ibb.co/mjTmwv/port34.png") no-repeat; 
    overflow: hidden; 
    background-size: cover; 
    width: 100%; 
    height: 100vh; 
} 

Answer 3

#front est de 100% de la taille de header. Essayez de définir votre en-tête sur height: 100%. Alternativement (la meilleure solution), définissez l'arrière-plan sur le corps si vous voulez qu'il couvre toute la page. C'est l'option la plus simple et la plus logique.

Answer 4

Régler la hauteur de votre élément d'en-tête à 100vh;

Donc, dans votre css ajouter:

header { 
height: 100vh; 
}