var Phenix = function () {
Troll du Web depuis 1996

Un header image en fullscreen

Je déteste cette mode : une grande image qui prend tout l’écran. Si vous avez de la chance, vous avez un titre et un menu. Basta.

Mais ce n’est pas le propos. Il se trouve qu’il y a des gens qui souhaite avoir cela, et comme ils payent pour...

Voici une technique assez simple. Il faut garder une chose à l’esprit quand on fait cela : tous les containers parent doivent avoir height : 100% ;.
Rien de folichons ici, mais comme j’oublie régulièrement comment faire...

  1. html, body, #page {
  2. height: 100%;
  3. }
  4.  
  5. .full-image {
  6. position: relative;
  7. width: 100%;
  8. height: 100%;
  9. background-image: url([...]);
  10. background-size: cover;
  11. background-position: center;
  12. }

Et le tour est joué !

Un message, un commentaire ?

modération a priori

Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

Qui êtes-vous ?
Votre message
  • Pour créer des paragraphes, laissez simplement des lignes vides.