1 files changed, 61 insertions, 32 deletions
diff --git a/files/fr/web/css/background-origin/index.md b/files/fr/web/css/background-origin/index.md
index e9a1286b35..379bea080b 100644
--- a/files/fr/web/css/background-origin/index.md
+++ b/files/fr/web/css/background-origin/index.md
@@ -1,21 +1,18 @@
 ---
 title: background-origin
 slug: Web/CSS/background-origin
-tags:
-  - CSS
-  - Propriété
-  - Reference
+browser-compat: css.properties.background-image
 translation_of: Web/CSS/background-origin
 ---
 {{CSSRef}}
 
-La propriété **`background-origin`** détermine l'origine de l'arrière-plan {{cssxref("background-image")}} à partir de la bordure, à l'intérieur de la bordure ou à l'intérieur de la zone de remplissage (_padding_).
+La propriété **`background-origin`** détermine l'origine de l'arrière-plan [`background-image`](/fr/docs/Web/CSS/background-image) à partir de la bordure, à l'intérieur de la bordure ou à l'intérieur de la zone de remplissage (<i lang="en">padding</i>).
 
 {{EmbedInteractiveExample("pages/css/background-origin.html")}}
 
-Attention, `background-origin` est ignorée lorsque {{cssxref("background-attachment")}} vaut `fixed`.
+Attention, `background-origin` est ignorée lorsque [`background-attachment`](/fr/docs/Web/CSS/background-attachment) vaut `fixed`.
 
-> **Note :** Cette propriété est rattachée à la propriété raccourcie {{cssxref("background")}}. Aussi, si on a une déclaration `background-origin` avant la propriété raccourcie et que cette dernière ne définit pas la valeur de l'origine, ce sera la valeur initiale par défaut qui sera prise en compte pour `background-origin`.
+> **Note :** Cette propriété est rattachée à la propriété raccourcie [`background`](/fr/docs/Web/CSS/background). Aussi, si on a une déclaration `background-origin` avant la propriété raccourcie et que cette dernière ne définit pas la valeur de l'origine, ce sera la valeur initiale par défaut qui sera prise en compte pour `background-origin`.
 
 ## Syntaxe
 
@@ -28,6 +25,7 @@ background-origin: content-box;
 /* Valeurs globales */
 background-origin: inherit;
 background-origin: initial;
+background-origin: revert;
 background-origin: unset;
 ```
 
@@ -36,57 +34,88 @@ background-origin: unset;
 - `border-box`
   - : L'arrière-plan est positionné relativement à la boîte de bordure.
 - `padding-box`
-  - : L'arrière-plan est positionné relativement à la boîte de remplissage (_padding_).
+  - : L'arrière-plan est positionné relativement à la boîte de remplissage (<i lang="en">padding</i>).
 - `content-box`
   - : L'arrière-plan est positionné relativement à la boîte de contenu.
 
-### Syntaxe formelle
+## Définition formelle
+
+{{cssinfo}}
+
+## Syntaxe formelle
 
 {{csssyntax}}
 
 ## Exemples
 
-### CSS
+### Définir différentes origines
 
 ```css
-div {
-  width: 200px;
-  height: 100px;
+.example {
+  border: 10px double;
+  padding: 10px;
+  background: url('image.jpg');
+  background-position: center left;
+  background-origin: content-box;
+}
+```
+
+```css
+#example2 {
+  border: 4px solid black;
+  padding: 10px;
+  background: url('image.gif');
+  background-repeat: no-repeat;
+  background-origin: border-box;
 }
+```
 
-.exemple {
-  border: 10px double;
-  padding: 10px;
-  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
-  background-color: palegreen;
-  background-position: 0px 40px;
-  background-origin: content-box;
-  background-repeat: no-repeat;
+```css
+div {
+  background-image: url('logo.jpg'), url('mainback.png'); /* Applique deux images en arrière-plan */
+  background-position: top right, 0px 0px;
+  background-origin: content-box, padding-box;
 }
 ```
 
-### HTML
+### Utiliser deux dégradés
+
+Dans cet exemple, la boîte possède une bordure épaisse en pointillés. Le premier dégradé utilise `padding-box` pour `background-origin` et l'arrière-plan s'inscrit donc à l'intérieur de la bordure. Le second dégradé utilise `content-box` et apparaît donc uniquement derrière le contenu.
+
+#### HTML
 
 ```html
-<div class="exemple"></div>
+<div class="box">Coucou !</div>
+```
+
+#### CSS
+
+```css
+.box {
+  margin: 10px 0;
+  color: #fff;
+  background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,0.6) 60%, rgba(252,176,69,1) 100%),
+              radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 28%);
+  border: 20px dashed black;
+  padding: 20px;
+  width: 400px;
+  background-origin: padding-box, content-box;
+  background-repeat: no-repeat;
+}
 ```
 
-### Résultat
+#### Résultat
 
-{{EmbedLiveSample("Exemples","300","200")}}
+{{EmbedLiveSample("","300","200")}}
 
 ## Spécifications
 
-| Spécification                                                                                            | État                                     | Commentaires         |
-| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
-| {{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.background-origin")}}
+{{Compat}}
 
 ## Voir aussi
 
-- {{cssxref("background-clip")}}
+- [`background-clip`](/fr/docs/Web/CSS/background-clip)