Placer une image de fond par rapport aux coins inférieur et droit

Tentons de résoudre un problème que nous avons certainement déjà tous rencontré : placer une image de fond à quelques pixels du bord droit et du bord inférieur d'un bloc HTML. Avez-vous déjà essayé ?

Différentes solutions

Pour réaliser cela il y a plusieurs solutions plus ou moins adaptées à votre cas, votre contexte ou la problématique de support navigateur. Voici une petite démonstration qui réunit ces différentes solutions.

Démonstrations

La base de code HTML et CSS est la suivante :

HTML

<div class="demo official"></div>

Ici official est une des classes utilisées pour les démos suivantes.

CSS

.demo {
    max-width: 320px;
    height: 200px;
    background: #eee url(http://www.alsacreations.com/css/img/picto-aide.png) no-repeat scroll;
    box-sizing: border-box;
}

La technique background-origin

Cette solution consiste à changer le modèle de référence en demandant au fond de prendre le contenu de la boîte comme référence de départ pour ses calculs.
Concernant le modèle de boîte, il existe les valeurs content-box, padding-box et border-box. Lorsque, comme dans cet exemple, la valeur de background-origin vaut content-box, la position du background sera calculée à partir du contenu de la boîte, c'est à dire la boîte sans comptabiliser les valeurs de border et padding.

En ajoutant un padding à notre boîte, on sait que l'image de fond sera appliquée à notre boîte mais décalée en largeur et hauteur de la valeur de notre padding.

.origin {
   padding: 25px;
   background-origin: content-box;
   background-position: 100% 100%;
}

Navigateurs	Versions	Détails
	Internet Explorer 9+	sans préfixe
	Firefox 3.6+ Firefox Mobile (Android)	préfixe -moz- jusqu'à Firefox 4
	Chrome 4.0+ Chrome Mobile	sans préfixe
	Opera 10.0+ Opera Mobile 10.0+	sans préfixe -o- sauf pour les versions 10.0 et 10.1
	Safari 3.1+ Safari Mobile 3.2+	sans préfixe
	Android Browser 2.1+	préfixe -webkit- jusqu'à 2.3

La technique calc()

Une technique purement mathématique : je place mon élément en partant de la gauche et en haut, je le place à 100% (donc tout à droite et en bas) et je lui soustraits en pixels le décalage désiré.

Note : conservez bien les espaces avant et après les "-", autrement ça ne fonctionnera pas.

.calc {   
   background-position: calc(100% - 25px) calc(100% - 25px);
}

Raphaël a écrit un très bon article sur calc() si vous souhaitez l'expérimenter davantage.

Navigateurs	Versions	Détails
	Internet Explorer 9+
	Firefox 4+ Firefox Mobile	préfixe -moz- jusqu'à Firefox 15
	Chrome 19+ Chrome Mobile	préfixe -webkit- jusqu'à Chrome 25
	Opera 15+ Opera Mobile 21+
	Safari 6+ Safari Mobile 6+	préfixe -webkit- jusqu'à Safari 6.1
	Android Browser 4.4+

La technique border-box

Cette technique fonctionne parce que mon modèle de boîte est box-sizing: border-box; pour ne pas que vous l'oubliiez, je rajoute l'information dans le code ci-dessous. Bien entendu vous pouvez obtenir ce résultat sans utiliser box-sizing à border-box, ce sera à vous de faire les bons calculs.

.border {
   box-sizing: border-box;
   border: 25px transparent solid;
   background-position: 100% 100%;
}

Support : plutôt pas mauvais :) (IE6 ne supporte pas les bordures transparentes, mais vous ne supportez pas IE6... si ?)

Navigateurs	Versions	Détails
	Internet Explorer 7+
	Firefox  Firefox Mobile (Android)
	Chrome  Chrome Mobile
	Opera Opera Mobile
	Safari Safari Mobile
	Android Browser

La technique officielle

C'est la technique qu'il faudrait utiliser car elle est simple et qu'elle est prévue pour cela.
background-position: peut accueillir les mots-clés "top", "right", "bottom", "left" en plus de valeurs chiffrées.

.official {
   background-position: right 25px bottom 25px;
}

La valeur ci-dessus fonctionne par paire "right 25px" signifie "à 25px de la droite" et "bottom 25px" à 25px du bas.

Support : Fonctionne depuis Internet Explorer 9 et tous les navigateurs modernes que nous avons testé (Chrome, Firefox, Opera 12+, Safari 6+, iOS Safari 7).

Navigateurs	Versions	Détails
	Internet Explorer 9+
	Firefox Firefox Mobile (Android)
	Chrome  Chrome Mobile
	Opera 12+ Opera Mobile 12+
	Safari 6+ Safari Mobile 7+
	Android Browser 2.1+

À lire également

Simon a écrit un petit article sur les background CSS3, alors n'hésitez pas à aller y faire un tour.
Consultez aussi l'article de Raphaël sur calc() si vous souhaitez l'expérimenter davantage.