Fix #13597 (#15792)

* Rewordings and minor updates to fix #13597
* Applying Tristan's review :)

files/fr/web/css/background-position/index.md

@@ -1,11 +1,13 @@
 ---
 title: background-position
 slug: Web/CSS/background-position
+l10n:
+  sourceCommit: 70b1b8ac18d3e3346645d4ee5155f654c83d96e0
 ---
 
 {{CSSRef}}
 
-La propriété **`background-position`** permet de définir la position initiale, relative à l'origine définie par [`background-origin`](/fr/docs/Web/CSS/background-origin), pour chaque image d'arrière-plan.
+La propriété [CSS](/fr/docs/Web/CSS) **`background-position`** permet de définir la position initiale, relative à l'origine définie par [`background-origin`](/fr/docs/Web/CSS/background-origin), pour chaque image d'arrière-plan.
 
 {{EmbedInteractiveExample("pages/css/background-position.html")}}
 
@@ -44,6 +46,7 @@ background-position: top right 10px;
 background-position: inherit;
 background-position: initial;
 background-position: revert;
+background-position: revert-layer;
 background-position: unset;
 ```
 
@@ -53,20 +56,24 @@ La propriété `background-position` peut être définie grâce à une ou plusie
 
 - `<position>`
 
-  - : Une valeur [`<position>`](/fr/docs/Web/CSS/position). Une position définit un couple de coordonnées XY qui permet de placer un objet par rapport aux bords de la boîte d'un élément. Une position peut être définie avec une ou deux valeurs. La première correspond à la position horizontale et la seconde à la position verticale.
+  - : Une valeur [`<position>`](/fr/docs/Web/CSS/position). Une position définit un couple de coordonnées XY qui permet de placer un objet par rapport aux bords de la boîte d'un élément. Une position peut être définie avec une à quatre valeurs. Si deux valeurs qui ne sont pas des mots-clés sont utilisées, la première représente la position horizontale et la seconde la position verticale. Si une seule valeur est indiquée, la deuxième sera `center` par défaut. Si trois ou quatre valeurs sont utilisées, les valeurs de longueur-pourcentage sont des décalages relatifs au(x) mot(s)-clé(s) précédent(s).
 
     **Définition avec une valeur&nbsp;:** la valeur peut être&nbsp;:
 
     - Le mot-clé `center` qui centre l'image.
-    - Un mot-clé parmi `top`, `left`, `bottom`, `right`. Ce mot-clé indique le bord par rapport auquel placer l'élément. Pour l'autre dimension, on utilisera la moitié de la boîte (50%).
+    - Un mot-clé parmi `top`, `left`, `bottom`, `right`. Ce mot-clé indique le bord par rapport auquel placer l'élément. Pour l'autre dimension, on utilisera la moitié de la boîte (50%) et l'élément sera placé au milieu de cet axe.
     - Une longueur ([`<length>`](/fr/docs/Web/CSS/length)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Cette valeur définit l'abscisse du point par rapport au bord gauche. L'ordonnée est fixée à 50%.
 
     **Définition avec deux valeurs&nbsp;:** la première valeur définit l'abscisse (la coordonnée horizontale X) et la seconde définit l'ordonnée (la coordonnée verticale Y). Chaque valeur peut être&nbsp;:
 
     - Un des mots-clés parmi `top`, `left`, `bottom`, `right`. Si `left` ou `right` est utilisé, la valeur définit l'abscisse et l'autre définira l'ordonnée. Si `top` ou `bottom` est indiqué, cette valeur définira l'ordonnée et l'autre valeur définira X.
     - Une valeur de longueur ([`<length>`](/fr/docs/Web/CSS/length)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Si l'autre valeur vaut `left` ou `right`, cette valeur définira l'ordonnée par rapport au bord haut. Si l'autre valeur est `top` ou `bottom`, cette valeur définira l'abscisse relativement au bord gauche. Si les deux valeurs sont des longueurs ou des pourcentages, la première définira l'abscisse et la seconde l'ordonnée.
 
-    > **Note :** Si une valeur est `top` ou `bottom`, la seconde ne peut pas être `top` ou `bottom`. Si une valeur est `left` ou `right`, la seconde ne peut pas être `left` ou `right`. Autrement dit `top top` ou `left right` seront considérées comme invalides.
+    > **Note :** Si une valeur est `top` ou `bottom`, la seconde ne peut pas être `top` ou `bottom`. Si une valeur est `left` ou `right`, la seconde ne peut pas être `left` ou `right`. Autrement dit, les combinaisons `top top`, `bottom bottom`, `top bottom`, `bottom top`, `right right`, `left left`, `left right` et `right left` seront considérées comme invalides.
+
+    - L'ordre des mots-clés n'est pas important, le navigateur pourra les réarranger si besoin. Ainsi, `top left` et `left top` auront le même effet. En revanche, si on associe une longueur ([`<length>`](/fr/docs/Web/CSS/length)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) avec un mot-clé, l'ordre est important et la valeur définissant l'abscisse doit arriver avant l'ordonnée&nbsp;: `right 20px` ne sera pas équivalent à `20px right` et cette dernière forme sera invalide. Les valeurs `left 20%` ou `20% bottom` sont valides car les abscisses et ordonnées sont bien rangées.
+
+    - La valeur par défaut est `left top` ou `0% 0%`.
 
     **Définition avec 3 valeurs&nbsp;:** Deux valeurs sont des mots-clés et la troisième est le décalage appliqué à la valeur qui précède.
 
@@ -85,20 +92,20 @@ Lorsqu'on exprime un décalage en pourcentage, ce dernier est relatif au contene
 
 Autrement dit, lorsqu'on utilise un pourcentage, celui-ci s'inscrit dans la formule suivante&nbsp;:
 
-```
+```plain
 (largeur conteneur - largeur image) * (position en %) = (décalage horizontal)
 (hauteur conteneur - hauteur image) * (position en %) = (décalage vertical)
 ```
 
 En utilisant l'axe horizontal pour un exemple, prenons une image dont la largeur mesure 300px, qu'on utilise celle-ci dans un conteneur dont la largeur mesure 100px et que `background-size` vaut `auto`&nbsp;:
 
-```
+```plain
 100px - 300px = -200px (différence entre le conteneur et l'image)
 ```
 
 Voici donc les décalages, exprimés en pixels, qu'on obtient avec les pourcentages -25%, 0%, 50%, 100% et 125%&nbsp;:
 
-```
+```plain
 -200px * -25% = 50px
 -200px * 0% = 0px
 -200px * 50% = -100px
@@ -114,7 +121,7 @@ Traduisons l'effet obtenu avec ces valeurs. Le **bord gauche** de **l'image** es
 - \-200px (le bord gauche de l'image est situé à 200px du bord gauche du conteneur, ce qui signifie pour notre exemple que le bord droit de l'image coïncide avec le bord droit du conteneur)
 - \-250px (le bord gauche de l'image est situé à 250px du bord gauche du conteneur, ce qui signifie pour notre exemple que le bord droit de l'image de 300px est au centre du conteneur).
 
-On notera donc que si l'image d'arrière-plan a les mêmes dimensions que le conteneur, les valeurs en pourcentage pour `background-position` n'auront aucun effet. Il faudra utiliser des valeurs absolues pour décaler l'image.
+On notera donc que si l'image d'arrière-plan a les mêmes dimensions que le conteneur, les valeurs en pourcentage pour `background-position` n'auront aucun effet (car la différence entre l'image et le conteneur est alors nulle). Il faudra utiliser des valeurs absolues pour décaler l'image.
 
 ## Définition formelle
 
@@ -154,7 +161,7 @@ div {
   background: url("startransparent.gif") #ffee99 2.5cm bottom no-repeat;
 }
 .exemple_deux {
-  background: url("startransparent.gif") #ffee99 3em 50% no-repeat;
+  background: url("startransparent.gif") #ffee99 left 4em bottom 1em no-repeat;
 }
 
 /*
@@ -166,7 +173,7 @@ L'ordre est le même entre background-image et -position.
   background-image: url("startransparent.gif"), url("catfront.png");
   background-position:
     0px 0px,
-    center;
+    right 3em bottom 2em;
 }
 ```
 
@@ -184,7 +191,7 @@ L'ordre est le même entre background-image et -position.
 
 ## Voir aussi
 
-- [Gérer plusieurs arrières-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)
+- [Gérer plusieurs arrières-plans](/fr/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds)
 - [`background-position-x`](/fr/docs/Web/CSS/background-position-x)
 - [`background-position-y`](/fr/docs/Web/CSS/background-position-y)
 - [`background-position-inline`](/fr/docs/Web/CSS/background-position-inline)