Positionner un background par la droite en CSS

L’ancienne syntaxe

Avant CSS3, la propriété background-position n’acceptait que 1 ou 2 valeurs :

• le positionnement/décalage du background par rapport au côté gauche
• le positionnement/décalage du background par rapport au côté supérieur

On avait alors ce genre de définitions, qui sont d’ailleurs toujours aujourd’hui les plus courantes :

* {
  background-position: center center;
  background-position: left top;
  background-position: right center;
  background-position: 25px center;
  background-position: 50% top;
}

Pour centrer verticalement un background, et le caler du côté droit, on utilisait donc la définition suivante :

* {
  background-position: right center;
}

En revanche, il était par exemple impossible de décaler ce background de 10px vers la gauche (tout en le maintenant calé à droite). Ce décalage n’était en effet possible qu’en se basant sur le coin supérieur gauche :

* {
  background-position: 10px center; /* décalage de 10px à partir de la gauche */
}

Le seul moyen d’avoir ce décalage était alors d’ajouter à la main une marge de 10px dans l’image destinée au background.

La nouvelle syntaxe

Cette limitation n’ayant pas vraiment de raison d’être, CSS3 nous a amené dans ses bagages une extension de la syntaxe à 3 ou 4 valeurs. Vous pouvez ainsi spécifier le côté de référence, suivi du décalage voulu. L’exemple précédent serait ainsi défini ainsi :

* {
  background-position: right 10px center;
}

Liens

Spécification CSS3 de la propriété background-position La propriété background-position sur le MDN Page CanIUse de la propriété