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

Astuce par (WebDesigner grapilleur de Kiwiz, Strasbourg)
Créé le , mis à jour le (39850 lectures)
Tags : css, background-origin, background-image, background-position

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 on 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 Internet Explorer 9+ sans préfixe
Firefox Firefox 3.6+
Firefox Mobile
(Android)
préfixe -moz- jusqu'à Firefox 4
 
Chrome Chrome 4.0+
Chrome Mobile
sans préfixe
Opera Opera 10.0+
Opera Mobile 10.0+
sans préfixe -o- sauf pour les versions 10.0 et 10.1
Safari

Safari 3.1+
Safari Mobile 3.2+

sans préfixe
Android Browser 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 Internet Explorer 9+  
Firefox Firefox 4+
Firefox Mobile
préfixe -moz- jusqu'à Firefox 15
Chrome Chrome 19+
Chrome Mobile
préfixe -webkit- jusqu'à Chrome 25
Opera Opera 15+
Opera Mobile 21+
 
Safari

Safari 6+
Safari Mobile 6+

préfixe -webkit- jusqu'à Safari 6.1
Android Browser 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 Internet Explorer 7+  
Firefox Firefox 
Firefox Mobile
(Android)

 
Chrome Chrome 
Chrome Mobile
 
Opera Opera
Opera Mobile
 
Safari

Safari
Safari Mobile 

 
Android Browser 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 Internet Explorer 9+  
Firefox Firefox
Firefox Mobile
(Android)

 
Chrome Chrome 
Chrome Mobile
 
Opera Opera 12+
Opera Mobile 12+
 
Safari

Safari 6+
Safari Mobile 7+

 
Android Browser 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.

Commentaires

Nico3333fr a dit le

Si l'image fait partie du contenu, un bon position: absolute; bottom: 0; right: 0; dans un bloc relatif marchera bien aussi :)

Raphael a dit le

@Nico3333fr : certes, mais là le but était de traiter des background-images ;)

Nico3333fr a dit le

Vivivi, c'est pour ça que je précisais bien "si elle fait partie du contenu" :)

gc-nomade a dit le

intéressant,
une application possible avec bordures transparente pour simuler, hmmm, des border-image avec gradient que Firefox ne rend pas encore : http://codepen.io/gc-nomade/details/HIJuL/
Technique similaire à l'article avec des gradient en background multiples pour des raisons différentes.

eviouchka a dit le

Merci Geoffrey pour ce très bon article ,
par contre je n'arrive pas à voir en quoi tu trouves plus simple et plus pratique la fonction "background-position" par rapport à "calc()" puisque les deux ne sont supportés sur IE qu'à partir de la version 9 et qu'avec "calc()" c'est le navigateur qui fait le boulot ?

Geoffrey C. a dit le

@eviouchka : Hello. Si tu parles de la technique officielle VS la technique calc, la première est simple sans le sens où elle est facilement compréhensible. Mais je ne la comparais à aucune autre technique en particulier. Elle est simplement faite pour cela. La fonction calc serait plus intéressante pour d'autres valeurs que 100% - N :)