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:

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

Motif de départ

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:

Le bloc central peut recevoir un contenu.

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:

Le bloc central peut recevoir un contenu.

Et le code associé:

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

/* 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;
}