diff options
Diffstat (limited to 'files/fr/web/css/background-attachment/index.md')
| -rw-r--r-- | files/fr/web/css/background-attachment/index.md | 144 |
1 files changed, 144 insertions, 0 deletions
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 +--- +<div>{{CSSRef}}</div> + +<p>La propriété <strong><code>background-attachment</code></strong> définit si la position de l'image d'arrière-plan est fixée dans la zone d'affichage (<em>viewport</em>) ou si celle-ci défile avec le bloc englobant.</p> + +<div>{{EmbedInteractiveExample("pages/css/background-attachment.html")}}</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css no-line-numbers">/* 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; +</pre> + +<p>La propriété <code>background-attachment</code> est définie avec un des mots-clés de la liste suivante.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>fixed</code></dt> + <dd>Ce mot-clé indique que l'arrière-plan est fixe par rapport à la zone d'affichage (<em>viewport</em>). 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")}}).</dd> + <dt><code>local</code></dt> + <dd>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.</dd> + <dt><code>scroll</code></dt> + <dd>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.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +{{csssyntax}} + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush:css">p { + background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); + background-attachment: fixed; +} +</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: 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></pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Exemple_simple")}}</p> + +<h3 id="Gestion_de_plusieurs_arrière-plans">Gestion de plusieurs arrière-plans</h3> + +<p>On peut utiliser cette propriété lorsqu'on travaille avec plusieurs images en arrière-plan. On peut définir, pour chaque image, un <code>background-attachment</code> 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.</p> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: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; +}</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: 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></pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Gestion_de_plusieurs_arrière-plans")}}</p> + +<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-attachment', 'background-attachment')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>La propriété a été étendue pour gérer plusieurs arrière-plans et la valeur <code>local</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Aucune modification significative.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}</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-attachment")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans" title="CSS/Multiple backgrounds">Gérer plusieurs arrière-plans</a></li> +</ul> |