aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/background-origin/index.md
diff options
context:
space:
mode:
authorSphinxKnight <SphinxKnight@users.noreply.github.com>2022-03-15 07:00:50 +0100
committerGitHub <noreply@github.com>2022-03-15 07:00:50 +0100
commitdf8056fc0652ecafffac996081b73435acfab849 (patch)
treeba22b4208fcbe6ca7765a1970d9b377d64b2af08 /files/fr/web/css/background-origin/index.md
parent464e20b22c72324bdaebc232aebefbaca9184a19 (diff)
downloadtranslated-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-origin/index.md')
-rw-r--r--files/fr/web/css/background-origin/index.md93
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)