Hello les boys,

voilà je suis sur l'exercice "Pratiquez" du cours "HTML et CSS". Mais je bloque sur un point, mon CSS n'affiche pas l'image de bannière qu'il me faut. Voici le code, vous comprendrez surement mieux. 

<!--BANDEAU IMAGE--------------------------->


<div id="Bannière_image">
  <div id="Bannière_description">
      Retour sur mes vacances à Avignon

      <a href="#" class="bouton_rouge">Voir l'article</a>
</div>
  </div>

#bannière_image

{
    background: url('images/sanfrancisco.jpg') no-repeat;
}

Est ce que quelqu'un aurait une piste pour savoir d'où proviens le bug ?

-
Edité par Kento Niark 25 mai 2022 à 11:53:28

Bonjour,

il n'y a pas que des boys ici

Pour ta question : peux-tu nous faire une capture d'écran de ton dossier de travail, pour vérifier que ton chemin vers l'image est correct ? Cependant, je vois déjà un problème : dans le html tu as "Bannière_image" et dans le css c'est "bannière_image". Évite les accents dans les classes, c'est fonctionnel mais je crois qu'il faut les échapper : ce sera plus sûr de se cantonner à l'alphabet "américain".

Lamecarlate a écrit:

Bonjour,

il n'y a pas que des boys ici

Pour ta question : peux-tu nous faire une capture d'écran de ton dossier de travail, pour vérifier que ton chemin vers l'image est correct ? Cependant, je vois déjà un problème : dans le html tu as "Bannière_image" et dans le css c'est "bannière_image". Évite les accents dans les classes, c'est fonctionnel mais je crois qu'il faut les échapper : ce sera plus sûr de se cantonner à l'alphabet "américain".

C'était juste les accents qui bugait justement, merci !

Tant que je suis sur le sujet de la bannière, j'en profite pour poser une seconde question : 

Quand je dezoom la page hmtl à 90% (ou moins), mon image ne rempli plus son conteneur. Comment faire pour qu'elle le remplisse dans tout les cas, ou que le conteneur se dezoom avec ?

#banniere_image

{
  margin-top: 15px;
    height: 200px;
    border-radius: 5px;
    background: url(images/sanfrancisco.jpg) no-repeat;
    position: relative;
    box-shadow: 0px 4px 4px #1c1a19;
    margin-bottom: 25px;
    object-fit: fill;
}

-
Edité par Kento Niark 31 mai 2022 à 6:41:09

Lamecarlate a écrit:

Je pense que tu cherches background-size.

#banniere_image

{
  margin-top: 15px;
    height: 200px;
    border-radius: 5px;
    background: url(images/sanfrancisco.jpg) no-repeat;
    position: relative;
    box-shadow: 0px 4px 4px #1c1a19;
    margin-bottom: 25px;
    object-fit: fill;
    background-size: contain;
}

Bonjour,

Lamecarlate a raison, mais il ne faut pas utiliser object-fill, et utiliser

background-size:cover;

et ça fonctionne bien

ChrisLebure a écrit:

Bonjour,

Lamecarlate a raison, mais il ne faut pas utiliser object-fill, et utiliser

background-size:cover;

et ça fonctionne bien

Hello,

effectivement vous avez raison avec Lamecarlate !

Merci bien les amis !