Propiedad CSS background-attachment
La propiedad background-attachment define si la background-image es fija o si se desplazará junto con el resto de la página.
background-attachment admite cinco valores: scroll, fixed, local, initial e inherit. Cuando se establece scroll, la imagen de fondo se desplaza junto con la página. Este es el valor predeterminado. Cuando se aplica fixed, la imagen de fondo permanece fija en relación con el viewport. Incluso si un elemento tiene un mecanismo de desplazamiento, el fondo no se mueve con la página. Cuando se establece local, la imagen de fondo se desplaza junto con el contenido del elemento. initial establece la propiedad en su valor predeterminado, e inherit la hereda del elemento padre. Nota: En JavaScript, el nombre de la propiedad del DOM es camelCase: backgroundAttachment.
| Valor inicial | scroll |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredable | No. |
| Animable | No. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.backgroundAttachment = "scroll"; |
Sintaxis
Sintaxis de la propiedad CSS background-attachment
background-attachment: scroll | fixed | local | initial | inherit;Ejemplo de la propiedad background-attachment con el valor "scroll":
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
background-image: url("https://es.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>En el siguiente ejemplo, la imagen de fondo es "fixed" y no se mueve con la página.
Ejemplo de la propiedad background-attachment con el valor "fixed":
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
background-image: url("https://es.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>Ejemplo de la propiedad background-attachment con el valor "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://es.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>Ejemplo de la propiedad background-attachment con una imagen de fondo fija y background-size: cover:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example {
background-image: url("https://es.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>Práctica
¿Cuáles de las siguientes son valores válidos para la propiedad CSS background-attachment?