convert content to md

1 files changed, 89 insertions, 117 deletions

diff --git a/files/fr/web/css/background/index.md b/files/fr/web/css/background/index.md
index a404e63da6..a5ab39b7e0 100644
--- a/files/fr/web/css/background/index.md
+++ b/files/fr/web/css/background/index.md
@@ -7,150 +7,122 @@ tags:
   - Reference
 translation_of: Web/CSS/background
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>background</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de définir les différentes valeurs des propriétés liées à la gestion des arrière-plans d'un élément (couleur, image, origine, taille, répétition, etc.).</p>
+La propriété CSS **`background`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de définir les différentes valeurs des propriétés liées à la gestion des arrière-plans d'un élément (couleur, image, origine, taille, répétition, etc.).
 
-<div>{{EmbedInteractiveExample("pages/css/background.html")}}</div>
+{{EmbedInteractiveExample("pages/css/background.html")}}
 
-<p>Elle permet de définir une ou plusieurs valeurs pour : {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, et {{cssxref("background-attachment")}}.</p>
+Elle permet de définir une ou plusieurs valeurs pour : {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, et {{cssxref("background-attachment")}}.
 
-<p>Lorsqu'on utilise la propriété raccourcie <code>background</code>, les valeurs fournies sont appliquées et pour les valeurs absentes, la propriété réinitialisera les propriétés détaillées avec leurs valeurs initiales.</p>
+Lorsqu'on utilise la propriété raccourcie `background`, les valeurs fournies sont appliquées et pour les valeurs absentes, la propriété réinitialisera les propriétés détaillées avec leurs valeurs initiales.
 
-<div class="note">
-<p><strong>Note :</strong> La propriété {{cssxref("background-color")}} ne peut être définie que sur le dernier arrière-plan car il n'y a qu'une seule couleur d'arrière-plan pour un élément.</p>
-</div>
+> **Note :** La propriété {{cssxref("background-color")}} ne peut être définie que sur le dernier arrière-plan car il n'y a qu'une seule couleur d'arrière-plan pour un élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* On utilise une couleur &lt;background-color&gt; */
+```css
+/* On utilise une couleur <background-color> */
 background: green;
 
-/* Ici, une &lt;bg-image&gt; avec &lt;repeat-style&gt; */
+/* Ici, une <bg-image> avec <repeat-style> */
 background: url("test.jpg") repeat-y;
 
-/* Là &lt;box&gt; et &lt;background-color&gt; */
+/* Là <box> et <background-color> */
 background: border-box red;
 
 /* Ici on utilise une seule image, centrée */
 /* et remise à l'échelle */
 background: no-repeat center/80% url("../img/image.png");
-</pre>
-
-<p>La propriété <code>background</code> permet de définir une ou plusieurs couches d'arrière-plan, séparées par des virgules. Chacune des couches peut être définie avec :</p>
-
-<ul>
- <li>Zéro ou une occurence d'une valeur :
-  <ul>
-   <li><code><a href="#&lt;attachment>">&lt;attachment&gt;</a></code></li>
-   <li><code><a href="#&lt;bg-image>">&lt;bg-image&gt;</a></code></li>
-   <li><code><a href="#&lt;position>">&lt;position&gt;</a></code></li>
-   <li><code><a href="#&lt;bg-size>">&lt;bg-size&gt;</a></code></li>
-   <li><code><a href="#&lt;repeat-style>">&lt;repeat-style&gt;</a></code></li>
-  </ul>
- </li>
- <li>Une valeur <code><a href="#&lt;bg-size>">&lt;bg-size&gt;</a></code> qui peut uniquement être utilisée directement après une valeur <code><a href="#&lt;position>">&lt;position&gt;</a></code> suivie d'une barre oblique (par exemple "<code>center/80%</code>")</li>
- <li>Une valeur <code><a href="#&lt;box>">&lt;box&gt;</a></code> présente zéro, une voire deux fois. Si elle n'est présente qu'une fois, cette valeur sera utilisée pour définir {{cssxref("background-origin")}} et {{cssxref("background-clip")}}. Si elle est présente à deux reprises, la première occurrence sera utilisée pour définir {{cssxref("background-origin")}} et la seconde définira {{cssxref("background-clip")}}.</li>
- <li>Une valeur <code><a href="#&lt;background-color>">&lt;background-color&gt;</a></code> qui peut uniquement être incluse pour la dernière couche qui est définie.</li>
-</ul>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;attachment&gt;</code></dt>
- <dd>Voir {{cssxref("background-attachment")}}</dd>
- <dt><code>&lt;box&gt;</code></dt>
- <dd>Voir {{cssxref("background-clip")}} et {{cssxref("background-origin")}}</dd>
- <dt><code>&lt;background-color&gt;</code></dt>
- <dd>Voir {{cssxref("background-color")}}</dd>
- <dt><code>&lt;bg-image&gt;</code></dt>
- <dd>Voir {{Cssxref("background-image")}}</dd>
- <dt><code>&lt;position&gt;</code></dt>
- <dd>Voir {{cssxref("background-position")}}</dd>
- <dt><code>&lt;repeat-style&gt;</code></dt>
- <dd>Voir {{cssxref("background-repeat")}}</dd>
- <dt><code>&lt;bg-size&gt;</code></dt>
- <dd>Voir {{cssxref("background-size")}}.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+La propriété `background` permet de définir une ou plusieurs couches d'arrière-plan, séparées par des virgules. Chacune des couches peut être définie avec :
+
+- Zéro ou une occurence d'une valeur :
+
+  - [`<attachment>`](#<attachment>)
+  - [`<bg-image>`](#<bg-image>)
+  - [`<position>`](#<position>)
+  - [`<bg-size>`](#<bg-size>)
+  - [`<repeat-style>`](#<repeat-style>)
+
+- Une valeur [`<bg-size>`](#<bg-size>) qui peut uniquement être utilisée directement après une valeur [`<position>`](#<position>) suivie d'une barre oblique (par exemple "`center/80%`")
+- Une valeur [`<box>`](#<box>) présente zéro, une voire deux fois. Si elle n'est présente qu'une fois, cette valeur sera utilisée pour définir {{cssxref("background-origin")}} et {{cssxref("background-clip")}}. Si elle est présente à deux reprises, la première occurrence sera utilisée pour définir {{cssxref("background-origin")}} et la seconde définira {{cssxref("background-clip")}}.
+- Une valeur [`<background-color>`](#<background-color>) qui peut uniquement être incluse pour la dernière couche qui est définie.
+
+### Valeurs
+
+- `<attachment>`
+  - : Voir {{cssxref("background-attachment")}}
+- `<box>`
+  - : Voir {{cssxref("background-clip")}} et {{cssxref("background-origin")}}
+- `<background-color>`
+  - : Voir {{cssxref("background-color")}}
+- `<bg-image>`
+  - : Voir {{Cssxref("background-image")}}
+- `<position>`
+  - : Voir {{cssxref("background-position")}}
+- `<repeat-style>`
+  - : Voir {{cssxref("background-repeat")}}
+- `<bg-size>`
+  - : Voir {{cssxref("background-size")}}.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="banniere"&gt;
-  Dessine-moi une étoile&lt;br/&gt;
-  Qui brille&lt;br/&gt;
+```html
+<p class="banniere">
+  Dessine-moi une étoile<br/>
+  Qui brille<br/>
   Dans le ciel.
-&lt;/p&gt;
-&lt;p class="attention"&gt;Voici un paragraphe !&lt;p&gt;</pre>
+</p>
+<p class="attention">Voici un paragraphe !<p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">.attention {
+```css
+.attention {
   background: pink;
 }
 
 .banniere {
   background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
 }
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.</p>
-
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre la règle 1.1 du WCAG</a></li>
- <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Comprendre les critères pour 1.1.1, comprendre WCAG 2.0</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>La propriété raccourcie a été étendue pour gérer plusieurs arrière-plans et également gérer les propriétés {{cssxref("background-size")}}, {{cssxref("background-origin")}} et {{cssxref("background-clip")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Pas de modification significative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#background', 'background')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.background")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("box-decoration-break")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Les gradients</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Gérer plusieurs arrière-plans</a></li>
-</ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Accessibilité
+
+Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.
+
+- [Comprendre la règle 1.1 du WCAG](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content)
+- [Comprendre les critères pour 1.1.1, comprendre WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+
+## Spécifications
+
+| Spécification                                                                                | État                                     | Commentaires                                                                                                                                                                                                                                   |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}     | {{Spec2('CSS3 Backgrounds')}} | La propriété raccourcie a été étendue pour gérer plusieurs arrière-plans et également gérer les propriétés {{cssxref("background-size")}}, {{cssxref("background-origin")}} et {{cssxref("background-clip")}}. |
+| {{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}} | {{Spec2('CSS2.1')}}                 | Pas de modification significative.                                                                                                                                                                                                             |
+| {{SpecName('CSS1', '#background', 'background')}}                             | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                                                                                                                                           |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.background")}}
+
+## Voir aussi
+
+- {{cssxref("box-decoration-break")}}
+- [Les gradients](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
+- [Gérer plusieurs arrière-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)