Cet article est une archive de mon ancien blog. Les informations y étant présentées peuvent être datées et ne plus refléter mes points de vue actuels.
Il est souvent utile de positionner une image de fond relativement à la droite d'un élément HTML. Exemple, positionner un chevron dans un dropdown, une loupe dans un champ recherche, etc.
La solution consiste à se servir de la propriété background-position de manière un peu inhabituelle.
En effet, en lisant les specs, on se rend compte qu'il est possible de lui fournir jusqu'à 4 arguments permettant d'exprimer un décalage relatif aux 4 côtés de l'élément HTML en question.
Pour positionner un élément centré verticalement à 8px de la droite d'un input, il suffit de faire :
input {
background-position: right 8px center;
}