convert content to md

1 files changed, 81 insertions, 109 deletions

diff --git a/files/fr/web/css/background-image/index.md b/files/fr/web/css/background-image/index.md
index 8060b3da48..6cf6e5316b 100644
--- a/files/fr/web/css/background-image/index.md
+++ b/files/fr/web/css/background-image/index.md
@@ -7,25 +7,24 @@ tags:
   - Reference
 translation_of: Web/CSS/background-image
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>background-image</code></strong> permet de définir une ou plusieurs images comme arrière(s)-plan(s) pour un élément.</p>
+La propriété **`background-image`** permet de définir une ou plusieurs images comme arrière(s)-plan(s) pour un élément.
 
-<div>{{EmbedInteractiveExample("pages/css/background-image.html")}}</div>
+{{EmbedInteractiveExample("pages/css/background-image.html")}}
 
-<p>Les images sont dessinées les unes au-dessus des autres. La première image indiquée est dessinée comme étant la plus proche de l'utilisateur.</p>
+Les images sont dessinées les unes au-dessus des autres. La première image indiquée est dessinée comme étant la plus proche de l'utilisateur.
 
-<p>Les bordures de l'élément sont dessinés par-dessus l'arrière-plan et la couleur {{cssxref("background-color")}} est dessinée sous l'arrière-plan. La position et les limites de chaque image sont gérées grâce aux propriétés {{cssxref("background-clip")}} et {{cssxref("background-origin")}}.</p>
+Les bordures de l'élément sont dessinés par-dessus l'arrière-plan et la couleur {{cssxref("background-color")}} est dessinée sous l'arrière-plan. La position et les limites de chaque image sont gérées grâce aux propriétés {{cssxref("background-clip")}} et {{cssxref("background-origin")}}.
 
-<p>Si une image donnée ne peut pas être chargée (par exemple lorsqu'il est impossible de charger un fichier via l'URI indiquée), les navigateurs considèreront la valeur comme <code>none</code>.</p>
+Si une image donnée ne peut pas être chargée (par exemple lorsqu'il est impossible de charger un fichier via l'URI indiquée), les navigateurs considèreront la valeur comme `none`.
 
-<div class="note">
-  <p><strong>Note :</strong> Même si les images sont opaques et que les couleurs ne seront pas affichées de façon normale, les développeurs doivent toujours définir une couleur d'arrière-plan via {{cssxref("background-color")}} au cas où les images ne peuvent être chargées.</p>
-</div>
+> **Note :** Même si les images sont opaques et que les couleurs ne seront pas affichées de façon normale, les développeurs doivent toujours définir une couleur d'arrière-plan via {{cssxref("background-color")}} au cas où les images ne peuvent être chargées.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeur simple */
+```css
+/* Valeur simple */
 background-image: url('https://example.com/bck.png');
 
 /* Plusieurs valeurs */
@@ -38,50 +37,52 @@ background-image: none;
 background-image: inherit;
 background-image: initial;
 background-image: unset;
-</pre>
+```
 
-<p>Chaque image d'arrière-plan peut être définie avec le mot-clé <code>none</code> ou avec une valeur de type <code>&lt;image&gt;</code>. Pour indiquer plusieurs images d'arrière-plan, on listera les différentes valeurs les unes à la suite des autres et séparées par des virgules :</p>
+Chaque image d'arrière-plan peut être définie avec le mot-clé `none` ou avec une valeur de type `<image>`. Pour indiquer plusieurs images d'arrière-plan, on listera les différentes valeurs les unes à la suite des autres et séparées par des virgules :
 
-<pre class="brush: css">background-image:
+```css
+background-image:
   linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
   url("https://mdn.mozillademos.org/files/7693/catfront.png");
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Un mot-clé qui indique qu'aucune image ne doit être utilisée comme arrière-plan.</dd>
- <dt><code>&lt;image&gt;</code></dt>
- <dd>Une valeur {{cssxref("&lt;image&gt;")}} qui indique l'image à afficher. On peut avoir plusieurs images en arrière-plan en séparant les valeurs par des virgules. Lorsque c'est une URL qui est utilisée, on peut aussi bien utiliser des simples quotes (<code>'texte_avec_double_quotes_"_'</code>) ou des doubles quotes (<code>"texte_avec_simple_quote_'_"</code>) pour encadrer le texte qui forme l'URL.</dd>
-</dl>
+- `none`
+  - : Un mot-clé qui indique qu'aucune image ne doit être utilisée comme arrière-plan.
+- `<image>`
+  - : Une valeur {{cssxref("&lt;image&gt;")}} qui indique l'image à afficher. On peut avoir plusieurs images en arrière-plan en séparant les valeurs par des virgules. Lorsque c'est une URL qui est utilisée, on peut aussi bien utiliser des simples quotes (`'texte_avec_double_quotes_"_'`) ou des doubles quotes (`"texte_avec_simple_quote_'_"`) pour encadrer le texte qui forme l'URL.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>On voit ici l'effet obtenu avec plusieurs images : l'étoile est légèrement transparente et se superpose par-dessus l'image du chat.</p>
+On voit ici l'effet obtenu avec plusieurs images : l'étoile est légèrement transparente et se superpose par-dessus l'image du chat.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="catsandstars"&gt;
-    Un paragraphe avec des chats&lt;br/&gt;
+```html
+<div>
+  <p class="catsandstars">
+    Un paragraphe avec des chats<br/>
     et des étoiles.
-  &lt;/p&gt;
-  &lt;p&gt;Pas ici.&lt;/p&gt;
-  &lt;p class="catsandstars"&gt;
-    Et voilà encore des chats.&lt;br/&gt;
+  </p>
+  <p>Pas ici.</p>
+  <p class="catsandstars">
+    Et voilà encore des chats.<br/>
     Et des étoiles !
-  &lt;/p&gt;
-  &lt;p&gt;Puis plus rien.&lt;/p&gt;
-&lt;/div&gt;</pre>
+  </p>
+  <p>Puis plus rien.</p>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   font-size: 1.5em;
   color: #FE7F88;
   background-color: transparent;
@@ -97,74 +98,45 @@ div {
                      url("https://mdn.mozillademos.org/files/7693/catfront.png");
   background-color: transparent;
 }
-</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="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre les règles du WCAG 1.1</a></li>
- <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 - W3C Understanding WCAG 2.0 (en anglais)</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', '#background-image', 'background-image')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>La propriété a été étendue pour gérer plusieurs arrières-plans et le type de donnée CSS {{cssxref("&lt;image&gt;")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.2', 'colors.html#propdef-background-image', 'background-image')}}</td>
-   <td>{{Spec2('CSS2.2')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>La gestion des dimensions intrinsèques (lorsqu'elles sont absentes ou présentes) est décrite.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#background-image', 'background-image')}}</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-image")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS">Implémenter des sprites en CSS</a></li>
- <li>{{HTMLElement("img")}},</li>
- <li>{{cssxref("&lt;image&gt;")}},</li>
- <li>{{cssxref("&lt;gradient&gt;")}},</li>
- <li>{{cssxref("linear-gradient")}},</li>
- <li>{{cssxref("radial-gradient")}},</li>
- <li>{{cssxref("repeating-linear-gradient")}},</li>
- <li>{{cssxref("repeating-radial-gradient")}},</li>
- <li>{{cssxref("element()")}},</li>
- <li>{{cssxref("_image", "image()")}},</li>
- <li>{{cssxref("image-set")}},</li>
- <li>{{cssxref("url","url()")}}</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 les règles du WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content)
+- [Understanding Success Criterion 1.1.1 - W3C Understanding WCAG 2.0 (en anglais)](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+
+## Spécifications
+
+| Spécification                                                                                                | État                                     | Commentaires                                                                                                                  |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#background-image', 'background-image')}}             | {{Spec2('CSS3 Backgrounds')}} | La propriété a été étendue pour gérer plusieurs arrières-plans et le type de donnée CSS {{cssxref("&lt;image&gt;")}}. |
+| {{SpecName('CSS2.2', 'colors.html#propdef-background-image', 'background-image')}} | {{Spec2('CSS2.2')}}                 |                                                                                                                               |
+| {{SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image')}} | {{Spec2('CSS2.1')}}                 | La gestion des dimensions intrinsèques (lorsqu'elles sont absentes ou présentes) est décrite.                                 |
+| {{SpecName('CSS1', '#background-image', 'background-image')}}                             | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                          |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.background-image")}}
+
+## Voir aussi
+
+- [Implémenter des sprites en CSS](/fr/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS)
+- {{HTMLElement("img")}},
+- {{cssxref("&lt;image&gt;")}},
+- {{cssxref("&lt;gradient&gt;")}},
+- {{cssxref("linear-gradient")}},
+- {{cssxref("radial-gradient")}},
+- {{cssxref("repeating-linear-gradient")}},
+- {{cssxref("repeating-radial-gradient")}},
+- {{cssxref("element()")}},
+- {{cssxref("_image", "image()")}},
+- {{cssxref("image-set")}},
+- {{cssxref("url","url()")}}