From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/background-attachment/index.md | 144 ++++++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 files/fr/web/css/background-attachment/index.md (limited to 'files/fr/web/css/background-attachment/index.md') diff --git a/files/fr/web/css/background-attachment/index.md b/files/fr/web/css/background-attachment/index.md new file mode 100644 index 0000000000..a047e44575 --- /dev/null +++ b/files/fr/web/css/background-attachment/index.md @@ -0,0 +1,144 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/background-attachment +--- +
{{CSSRef}}
+ +

La propriété background-attachment définit si la position de l'image d'arrière-plan est fixée dans la zone d'affichage (viewport) ou si celle-ci défile avec le bloc englobant.

+ +
{{EmbedInteractiveExample("pages/css/background-attachment.html")}}
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+background-attachment: scroll;
+background-attachment: fixed;
+background-attachment: local;
+
+/* Valeurs globales */
+background-attachment: inherit;
+background-attachment: initial;
+background-attachment: unset;
+
+ +

La propriété background-attachment est définie avec un des mots-clés de la liste suivante.

+ +

Valeurs

+ +
+
fixed
+
Ce mot-clé indique que l'arrière-plan est fixe par rapport à la zone d'affichage (viewport). Ainsi, même si l'élément dispose d'outils de défilement, l'arrière-plan ciblé ne se déplacera pas avec l'élément (cette valeur n'est pas compatible avec {{cssxref("background-clip", "background-clip: text", "#text")}}).
+
local
+
Ce mot-clé indique que l'arrière-plan se déplace avec le contenu de l'élément associé. Ainsi, si l'élément défile, l'arrière-plan défilera avec. Les zones de positionnement et de dessin de l'arrière-plan sont relatives à la zone de l'élément plutôt qu'au cadre extérieur.
+
scroll
+
Ce mot-clé indique que l'arrière-plan est fixé par rapport au contenu de l'élément (il ne défile pas avec) mais est rattaché à la bordure de l'élément.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Exemple simple

+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+
+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple_simple")}}

+ +

Gestion de plusieurs arrière-plans

+ +

On peut utiliser cette propriété lorsqu'on travaille avec plusieurs images en arrière-plan. On peut définir, pour chaque image, un background-attachment spécifique. Pour cela, on utilisera une liste, séparée par des virgules. Les images seront associées dans l'ordre à chaque propriété d'attachement.

+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}
+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Gestion_de_plusieurs_arrière-plans")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}{{Spec2('CSS3 Backgrounds')}}La propriété a été étendue pour gérer plusieurs arrière-plans et la valeur local.
{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}{{Spec2('CSS2.1')}}Aucune modification significative.
{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.background-attachment")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf