Positionnement avancé sur le background image

background image

Si vous avez besoin de positionner un background-image en CSS à 20px de la gauche et 10px du haut
( top :10px ; left :20px ) , ce sera très simple.
Il suffit de mettre background-position: 20px 10px dans le CSS . Mais que faire si vous voulez positionner 20px de la droite et 10px du bas ( bottom :10px ; right :20px) ?

Supposons aussi que nous ne savons pas la largeur et la hauteur exacte de l’élément ce qui est fort probable sur une mise en page fluide et un contenu dynamique. (Dans le cas contraire ce sera super simple de le faire via une syntaxe standard)

Voilà une situation où nombreux d’entre nous ont été déjà confronté, voici quelques techniques pour traiter le sujet :

La technique avec la syntaxe à 4 valeurs

background-position: peut accueillir les mots-clés “top”, “right”, “bottom”, “left” en plus de valeurs chiffrées.

La valeur ci-dessus fonctionne par paire “right 20px” signifie “à 20px de la droite” et “bottom 10px” à 10px du bas.

Les navigateurs supportés sont : Chrome 25+, Firefox 13+, IE 9+, Opera 10.5+, Safari/iOS 7+. Le danger de la solution c’est android.
On a testé sur Android 4.0, 4.1, et 4.2 la solution ne marche pas. Android 4.4 n’est pas compatible tout simplement.

La technique calc()

On va utiliser deux valeurs sur l’élément background-position comme d’habitude mais cette fois-ci, on utilisera les résultats de la fonction calc() comme ici :

Remarque : ne pas supprimer les espaces avant et après les “-”, autrement ça va pas marcher

Les navigateurs supportés sont : Chrome 25+, Firefox 13+, IE 9+, Opera 10.5+, Safari/iOS 7+, mais là encore une solution non supportée par Android 4.4

Utiliser javascript

Si vous voulez un support parfait sur tous les navigateurs, la meilleure solution est d’utiliser JavaScript.
Le javascript va mesurer la hauteur / largeur de l’élément pour connaître la taille de l’image bg, puis va ajustez le CSS au besoin.

Répondre