Page 01 site avec w3.css

Intégrer une image en têtière

L'intégration de l'image de têtière ci-dessus a nécessité la création d'une classe dans les styles CSS (placés ici dans le <head>). Les concepteurs de w3schools nomment cette classe bgimg (pour “background image”) mais vous pouvez lui donner le nom que vous voulez. Les déclarations CSS liées à la classe bgimg ont été trouvées dans le code source du template W3.CSS nommé Cafe template. L'url d'accès à l'image a bien sûr été modifiée pour accéder à l'image choisie !

Voici quelles sont ces déclarations CSS :

      .bgimg {
      background-position: center;
      background-size: cover;
      background-image:
      url("img/coffee1200x900.jpg");
      ...
      }

Il suffit ensuite d'intégrer dans le header de la page la classe bgimg :

      <header class="bgimg
      w3-container w3-theme w3-center">

Image disponible sur un template proposé par w3schools.com

Déterminer la taille de l'icône

L'icône Font Awesome présentée ci-contre est affichée en grande taille grâce à une classe du nom de l'icône (.fa-coffee). Cette classe a été créée dans les styles personnalisés placés dans le <head>. La déclaration CSS de cette classe est : {font‑size: 170px}.

La taille en pixels est déterminée par la place occupée par l'icône juste avant le point de rupture où le texte bascule sous l'icône. Si la taille de l'icône est trop grande, en approchant de ce point de rupture, le texte se superpose à l'image. Faites l'expérience en modifiant la taille de l'icône à 200px et en faisant varier la largeur de la fenêtre d'affichage. Vous constaterez alors la superposition du texte sur l'icône.

Les icônes utilisées dans les gabarits de w3schools utilisant w3.css sont celle de la version 4.7 de Font Awesome. Vous pouvez choisir les icônes parmi toutes celles présentées à cette adresse : fontawesome.com