Fond de page en trois parties avec partie centrale de largeur fixe

On souhaite réaliser une mise en page avec une «bannière» sur toute la largeur du viewport (zone de visualisation du navigateur) composée visuellement de trois parties:

• Une partie centrale de largeur fixe en pixels (ou éventuellement en em ou autre unité), centrée horizontalement.
• Une partie à gauche qui part du bord gauche de la partie centrale et va jusqu’au bord gauche de la fenêtre.
• Une partie à droite, sur le même principe que celle de gauche mais avec une visuel différent.

Dans les exemples qui suivent on travaille à partir de cette image:

Avec une image de 3000px de large

Cela dépend de la nature du visuel, mais la plupart du temps on peut combiner les motifs en une seule image suffisamment large, par exemple de 3000px de large, et garder un poids d’image correct (notamment au format PNG-8, avec ou sans couche alpha). Il faudra veiller à ce que la partie centrale soit parfaitement au centre de la grande image.

Voici le résultat:

Et le code associé:

<div id="triptyque1">
  <div class="centre">…</div>
</div>

/* Conteneur avec l'image de fond centrée */
#triptyque1 {
  background: #474747 url('triptyque-large.png') no-repeat center top;
}
/* Contenu centré grâce aux marges automatiques */
#triptyque1 > .centre {
  width: 400px;
  min-height: 200px;
  margin: 0 auto;
}

Avec trois images ou un sprite

Dans les cas où il est préférable d’utiliser plusieurs images ou une image de type sprite, on va devoir jouer avec trois éléments pour afficher nos trois images de fond. On a déjà deux conteneurs dans notre structure HTML, il ne nous manque qu’un seul élément. On pourra donc soit rajouter un élément de décoration vide dans le code HTML (un span par exemple), soit utiliser un pseudo-élément. C’est cette deuxième option qui est présentée ici. Attention, ce mécanisme n’est pas compatible avec IE7.

Le résultat est identique à celui de l’exemple précédent:

Et le code associé:

<div id="triptyque2">
  <div class="centre">…</div>
</div>

<style>
/* Conteneur qui affiche et répète la partie droite de l'image */
#triptyque2 {
  position: relative;
  background: #474747 url('triptyque-sprite.png') repeat-x right -600px;
}
/* Pseudo-élément qui va servir à afficher la partie gauche de l'image */
#triptyque2:before {
  content: "";
  position: absolute; z-index: 1;
  top: 0; bottom: 0;
  left: 0; right: 50%;
  background: url('triptyque-sprite.png') repeat-x left -300px;
}
/* Contenu centré grâce aux marges automatiques */
#triptyque2 > .centre {
  position: relative; z-index: 2;
  width: 400px;
  min-height: 200px;
  margin: 0 auto;
  background: url('triptyque-sprite.png') no-repeat center top;
}
</style>