diff options
author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2022-03-15 07:00:50 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-03-15 07:00:50 +0100 |
commit | df8056fc0652ecafffac996081b73435acfab849 (patch) | |
tree | ba22b4208fcbe6ca7765a1970d9b377d64b2af08 /files/fr/web/css/background-repeat | |
parent | 464e20b22c72324bdaebc232aebefbaca9184a19 (diff) | |
download | translated-content-df8056fc0652ecafffac996081b73435acfab849.tar.gz translated-content-df8056fc0652ecafffac996081b73435acfab849.tar.bz2 translated-content-df8056fc0652ecafffac996081b73435acfab849.zip |
Remove mozillademo links from CSS (#3642)
* Work - part 1 / N
* background-attachment
* background-blend-mode
* background-image
* background-origin
* Background position
* background-repeat
* background-size
* border-image
* border-image-outset
* border-image-repeat
* border-image-slice
* border-image-width
* clip-path
* content
* cross-fade()
* border-radius-generator
* multiple bckgrnd
* vertical-align
* url
* text-combine-upright
* position_value
* image-rendering
* using css gradients
* font-stretch
* font-stretch - add bcd key
* font-variant-numeric
* font-weight
* image-orientation
* list-style-image
* mask-border
* mask-clip
* mask-composite
* mask-image
* mask-mode
* mask-origin
* mask-position
* mask-size
* object-fit
* object-position
* position
* Various fixes and improvements
* Remove unecessary files
* Remove unecessary files (part 2)
* Missed level 1 fixes
Co-authored-by: cw118 <carolyn94118@gmail.com>
Diffstat (limited to 'files/fr/web/css/background-repeat')
-rw-r--r-- | files/fr/web/css/background-repeat/index.md | 187 |
1 files changed, 72 insertions, 115 deletions
diff --git a/files/fr/web/css/background-repeat/index.md b/files/fr/web/css/background-repeat/index.md index d11530c2ad..e65beaf890 100644 --- a/files/fr/web/css/background-repeat/index.md +++ b/files/fr/web/css/background-repeat/index.md @@ -1,19 +1,16 @@ --- title: background-repeat slug: Web/CSS/background-repeat -tags: - - CSS - - Propriété - - Reference +browser-compat: css.properties.background-repeat translation_of: Web/CSS/background-repeat --- {{CSSRef}} -La propriété **`background-repeat`** définit la façon dont les images utilisées en arrière-plan sont répétées. Une image d'arrière-plan pourra ainsi être répétée sur l'axe horizontal, l'axe vertical ou bien ne pas être répétée. +La propriété [CSS](/fr/docs/Web/CSS) **`background-repeat`** définit la façon dont les images utilisées en arrière-plan sont répétées. Une image d'arrière-plan pourra ainsi être répétée sur l'axe horizontal, l'axe vertical ou bien ne pas être répétée. {{EmbedInteractiveExample("pages/css/background-repeat.html")}} -Par défaut, les images répétées sont rognées à la taille de l'élément mais elles peuvent être redimensionnées pour occuper l'espace avec un nombre entier de répétitions (`round`) voire être distribuées avec des espaces entre les motifs pour remplir la zone (`space`). +Par défaut, les images répétées sont rognées à la taille de l'élément, mais elles peuvent être redimensionnées pour occuper l'espace avec un nombre entier de répétitions (`round`) voire être distribuées avec des espaces entre les motifs pour remplir la zone (`space`). ## Syntaxe @@ -27,8 +24,7 @@ background-repeat: round; background-repeat: no-repeat; /* Syntaxe avec deux valeurs */ -/* Première valeur : axe horizontal */ -/* Seconde valeur : axe vertical */ +/* axe horizontal | vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; @@ -37,6 +33,7 @@ background-repeat: no-repeat round; /* Valeurs globales */ background-repeat: inherit; background-repeat: initial; +background-repeat: revert; background-repeat: unset; ``` @@ -44,13 +41,13 @@ background-repeat: unset; - `<repeat-style>` - - : Un mot-clé qui peut être utilisé dans la syntaxe à une valeur ou à deux valeurs. La syntaxe utilisant une valeur est une notation raccourcie dont voici le tableau de correspondance : + - : Un mot-clé qui peut être utilisé dans la syntaxe à une valeur ou à deux valeurs. La syntaxe utilisant une valeur est une notation raccourcie dont voici le tableau de correspondance : <table class="standard-table"> <tbody> <tr> <td><strong>Une seule valeur</strong></td> - <td><strong>Équivalent avec deux-valeurs</strong></td> + <td><strong>Équivalent avec deux valeurs</strong></td> </tr> <tr> <td><code>repeat-x</code></td> @@ -79,59 +76,55 @@ background-repeat: unset; </tbody> </table> - Lorsqu'on utilise la syntaxe à deux valeurs, la première indique la méthode de répétition pour l'axe horizontal et la seconde celle pour l'axe vertical. Voici un tableau décrivant chacune des options : + Lorsqu'on utilise la syntaxe à deux valeurs, la première indique la méthode de répétition pour l'axe horizontal et la seconde celle pour l'axe vertical. Voici une définition des différentes options : - <table class="standard-table"> - <tbody> - <tr> - <td><code>repeat</code></td> - <td> - L'image est répétée autant de fois que nécessaire pour recouvrir la zone - dédiée à l'arrière-plan. La dernière image sera rognée si nécessaire. - </td> - </tr> - <tr> - <td><code>space</code></td> - <td> - L'image est répétée autant que possible sans rognage. La première et la - dernière image sont accolées aux bords de l'élément et des espaces sont - repartis de façon égale entre les images. La propriété - {{cssxref("background-position")}} est ignorée sauf s'il n'y a - qu'une seule image qui puisse être affichée sans être rognée. Le seul - cas où <code>space</code> est utilisé et qu'une image est rognée se - produit lorsque l'image est trop grande pour être affichée. - </td> - </tr> - <tr> - <td><code>round</code></td> - <td> - L'image est répétée autant que possible et est étirée si nécessaire afin - qu'il n'y ait ni rognage ni espace restant. Dès qu'il y a la place - d'ajouter une image, les autres sont compressées pour lui laisser la - place. Ainsi, une image avec une largeur originale de 260px, répétée - trois fois, pourra être étirée pour que chaque exemplaire mesure 300 - pixels de large, lorsqu'une autre image sera ajoutée, elles seront - compressées sur 225 pixels. - </td> - </tr> - <tr> - <td><code>no-repeat</code></td> - <td> - Il n'y a aucune répétition de l'image (dès lors, il est possible que - toute la zone ne soit pas recouverte par cette image). La position de - l'image est définie grâce à la propriété - {{cssxref("background-position")}}. - </td> - </tr> - </tbody> - </table> + - `repeat` + - : L'image est répétée autant de fois que nécessaire pour recouvrir la zone dédiée à l'arrière-plan. La dernière image sera rognée si nécessaire. + - `space` + - : L'image est répétée autant que possible sans rognage. La première et la dernière image sont accolées aux bords de l'élément et des espaces sont repartis de façon égale entre les images. La propriété [`background-position`](/fr/docs/Web/CSS/background-position) est ignorée sauf s'il n'y a qu'une seule image qui puisse être affichée sans être rognée. Le seul cas où `space` est utilisé et qu'une image est rognée se produit lorsque l'image est trop grande pour être affichée. + - `round` + - : L'image est répétée autant que possible et est étirée si nécessaire afin qu'il n'y ait ni rognage ni espace restant. Dès qu'il y a la place d'ajouter une image, les autres sont compressées pour lui laisser la place. Ainsi, une image avec une largeur originale de 260px, répétée trois fois, pourra être étirée pour que chaque exemplaire mesure 300 pixels de large, lorsqu'une autre image sera ajoutée, elles seront compressées sur 225 pixels. + - `no-repeat` + - : Il n'y a aucune répétition de l'image (dès lors, il est possible que toute la zone ne soit pas recouverte par cette image). La position de l'image est définie grâce à la propriété [`background-position`](/fr/docs/Web/CSS/background-position). + +## Définition formelle + +{{cssinfo}} -### Syntaxe formelle +## Syntaxe formelle {{csssyntax}} ## Exemples +### HTML + +```html +<ol> + <li>no-repeat + <div class="un"></div> + </li> + <li>repeat + <div class="deux"></div> + </li> + <li>repeat-x + <div class="trois"></div> + </li> + <li>repeat-y + <div class="quatre"></div> + </li> + <li>space + <div class="cinq"></div> + </li> + <li>round + <div class="six"></div> + </li> + <li>repeat-x, repeat-y (plusieurs images) + <div class="sept"></div> + </li> +</ol> +``` + ### CSS ```css @@ -144,91 +137,55 @@ li { margin-bottom: 12px; } div { - background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif); - width: 160px; - height: 70px; + background-image: url(starsolid.gif); + width: 160px; + height: 70px; } -/* background repeat CSS */ -.one { - background-repeat: no-repeat; +/* background-repeat CSS */ +.un { + background-repeat: no-repeat; } -.two { - background-repeat: repeat; +.deux { + background-repeat: repeat; } -.three { - background-repeat: repeat-x; +.trois { + background-repeat: repeat-x; } -.four { - background-repeat: repeat-y; +.quatre { + background-repeat: repeat-y; } - -.five { +.cinq { background-repeat: space; } - .six { background-repeat: round; } /* Plusieurs images */ -.seven { - background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), - url(https://developer.mozilla.org/static/img/favicon32.png); - background-repeat: repeat-x, - repeat-y; - height: 144px; +.sept { + background-image: url(starsolid.gif), + url(favicon.png); + background-repeat: repeat-x, + repeat-y; + height: 144px; } ``` -### HTML - -```html -<ol> - <li>no-repeat - <div class="one"></div> - </li> - <li>repeat - <div class="two"></div> - </li> - <li>repeat-x - <div class="three"></div> - </li> - <li>repeat-y - <div class="four"></div> - </li> - <li>space - <div class="five"></div> - </li> - <li>round - <div class="six"></div> - </li> - <li>repeat-x, repeat-y (plusieurs images) - <div class="seven"></div> - </li> -</ol> -``` - ### Résultat Dans cet exemple, chaque élément de la liste illustre une valeur différente de `background-repeat`. -{{EmbedLiveSample('Exemples', 240, 560)}} +{{EmbedLiveSample('', 240, 560)}} ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}} | {{Spec2('CSS3 Backgrounds')}} | Ajout de la prise en charge de plusieurs images d'arrière-plan. La syntaxe avec deux valeurs permet d'avoir des motifs de répétition différents pour les deux axes. Les mots-clés `space` et `round` sont ajoutés. La définition de la zone de dessin pour l'arrière-plan est mieux définie pour les éléments en ligne. | -| {{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}} | {{Spec2('CSS2.1')}} | Aucune modification significative. | -| {{SpecName('CSS1', '#background-repeat', 'background-repeat')}} | {{Spec2('CSS1')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.background-repeat")}} +{{Compat}} ## Voir aussi -- [Utiliser plusieurs arrières-plans en CSS](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) +- [Utiliser plusieurs arrière-plans en CSS](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) |