Layouts – Fonds en Rayure

LEÇON PRATIQUE

 

Caractéristiques

Une ou plusieurs images de fond qui restent statique derrière la page qui scrolle. Avec une seule image on a un effet de "fenêtre" sur quelque chose derrière la page. Avec plusieurs images de fond on a un effet de trompe l’œil.

 

alien-isolation-screenshotExample 1 - Alien Isolation

Page en ligne : Ouvrir

Code source (fichier ZIP) : Télécharger

 

 

infinity-pools-screenshotExample 2 - Infinity Pools

Page en ligne : Ouvrir

Code source (fichier ZIP) : Télécharger

 

Comment ça marche ?

Les sections (div) qui contiennent des images ont :

  • une hauteur spécifique
  • un fond qui ne bouge pas quand on scrolle (background-attachment : fixed)
  • une image de fond qui couvre entièrement l'écran (background-size : cover)
  • une image de fond centrée dans le sens vertical et dans le sens horizontal (background-position : center center)

 

HTML


<div class="section-image" id="section-image-1" ></div>

...

<div class="section-image" id="section-image-2" ></div>

 

CSS


.section-image
{
  height:360px;
  background: black center center no-repeat fixed;
  background-size:cover;
}

#section-image-1
{
  background-image:url('img1.jpg');
}

#section-image-2
{
  background-image:url('img2.jpg');
}

 

Remarques

  • Pas besoin de JavaScript ou jQuery pour cette technique : page entièrement faite avec HTML et CSS.
  • Avec l'instruction CSS "background-size:cover" l'image de fond est taillée de façon à ce qu'elle soit capable de couvrir entièrement l'écran, à la fois dans le sens vertical et dans le sens horizontal. Du coup, sauf si l'écran a les mêmes proportions que l'image, il y a un débordement - soit verticalement, soit horizontalement.
  • Avec "background-position:center center" l'image sera centrée sur l'écran et donc les parties invisibles de l'image (à cause des débordements) seront les extrémités haut/bas ou gauche/droite.
  • Du coup, c'est une technique qui est automatiquement responsive (pas besoin de @media queries)