Propriété CSS background-attachment
La propriété background-attachment définit si l'image d'arrière-plan est fixe ou si elle défile avec le reste de la page.
background-attachment prend en charge cinq valeurs : scroll, fixed, local, initial et inherit. Lorsque scroll est défini, l'image d'arrière-plan défile avec la page. Il s'agit de la valeur par défaut. Lorsque fixed est appliqué, l'image d'arrière-plan reste fixe par rapport à la fenêtre de visualisation. Même si un élément possède un mécanisme de défilement, l'arrière-plan ne bouge pas avec la page. Lorsque local est défini, l'image d'arrière-plan défile avec le contenu de l'élément. initial réinitialise la propriété à sa valeur par défaut, et inherit l'hérite de l'élément parent. Remarque : en JavaScript, le nom de la propriété DOM est en camelCase : backgroundAttachment.
| Valeur initiale | scroll |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter et ::first-line. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS1 |
| Syntaxe DOM | object.style.backgroundAttachment = "scroll"; |
Syntaxe
Syntaxe de la propriété CSS background-attachment
background-attachment: scroll | fixed | local | initial | inherit;Exemple de la propriété background-attachment avec la valeur "scroll" :
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
background-image: url("https://fr.w3docs.com/build/images/w3docs-logo-black.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 400px 100px;
}
.scroll-container {
height: 300px;
overflow: auto;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<h2>background-attachment example</h2>
<div class="scroll-container">
<p>The background-image scrolls with the viewport. Try to scroll down.</p>
<p>More content to demonstrate scrolling...</p>
<p>Keep scrolling...</p>
<p>Almost there...</p>
<p>End of content.</p>
</div>
<p>If you do not see any scrollbars, try to resize the browser window.</p>
</body>
</html>Dans l'exemple suivant, l'image d'arrière-plan est "fixed" et ne bouge pas avec la page.
Exemple de la propriété background-attachment avec la valeur "fixed" :
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
background-image: url("https://fr.w3docs.com/build/images/w3docs-logo-black.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 400px 100px;
}
.scroll-container {
height: 300px;
overflow: auto;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<h2>background-attachment example</h2>
<div class="scroll-container">
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>More content to demonstrate scrolling...</p>
<p>Keep scrolling...</p>
<p>Almost there...</p>
<p>End of content.</p>
</div>
<p>If you do not see any scrollbars, try to resize the browser window.</p>
</body>
</html>Exemple de la propriété background-attachment avec la valeur "local" :
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.local-container {
height: 300px;
overflow: auto;
border: 1px solid #ccc;
padding: 10px;
background-image: url("https://fr.w3docs.com/build/images/w3docs-logo-black.png");
background-repeat: no-repeat;
background-attachment: local;
background-size: 400px 100px;
}
</style>
</head>
<body>
<h2>background-attachment example</h2>
<div class="local-container">
<p>The background-image scrolls with the element's contents, not the viewport. Try to scroll down.</p>
<p>More content to demonstrate scrolling...</p>
<p>Keep scrolling...</p>
<p>Almost there...</p>
<p>End of content.</p>
</div>
<p>If you do not see any scrollbars, try to resize the browser window.</p>
</body>
</html>Exemple de la propriété background-attachment avec une image d'arrière-plan fixe et background-size: cover :
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example {
background-image: url("https://fr.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<h2>background-attachment example</h2>
<p>Scroll the page to see the effect.</p>
<div class="example"></div>
<div style="height:800px;background-color:#1c87c9;"></div>
</body>
</html>Pratique
Parmi les propositions suivantes, lesquelles sont des valeurs valides pour la propriété CSS background-attachment ?