W3docs
es
Iniciar sesión

Propiedad CSS background-attachment

La propiedad CSS background-attachment define si la imagen de fondo se desplaza con la página, permanece fija o se mueve con el contenido.

La propiedad background-attachment define si una imagen de fondo permanece fija en su lugar o se desplaza junto con el resto de la página. Controla cómo se comporta la imagen mientras el usuario hace scroll — un detalle pequeño que es el ingrediente clave detrás de efectos como los banners fijos y el parallax con solo CSS.

Esta página explica cada valor, cuándo usar cada uno y el único problema (en móvil) que suele causar confusión.

Valores

background-attachment acepta cinco valores:

  • scroll (predeterminado) — el fondo está fijado al elemento, por lo que no se mueve cuando el contenido del elemento hace scroll, pero sí se mueve cuando la página hace scroll. En la práctica se comporta como "se desplaza con la página."
  • fixed — el fondo está fijado al viewport. Permanece estático mientras todo lo demás se desplaza, por lo que el contenido parece deslizarse sobre una imagen estacionaria. Esto es lo que crea el efecto clásico de parallax / banner hero.
  • local — el fondo está fijado al contenido del elemento. Cuando haces scroll dentro de un elemento desplazable (overflow: auto), el fondo se mueve junto con ese contenido.
  • initial — restablece la propiedad a su valor predeterminado (scroll).
  • inherit — toma el valor del elemento padre.

La diferencia entre scroll y local solo se aprecia en un elemento que tiene su propia barra de desplazamiento. En una página con scroll normal, se ven igual.

En JavaScript el nombre de la propiedad DOM está en camelCase: element.style.backgroundAttachment.

Valor inicialscroll
Se aplica aTodos los elementos. También se aplica a ::first-letter y ::first-line.
HeredadoNo.
AnimableNo.
VersiónCSS1
Sintaxis DOMobject.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://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.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>
Pruébalo tú mismo »

En el siguiente ejemplo, la imagen de fondo está "fija" 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://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.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>
Pruébalo tú mismo »

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://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.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>
Pruébalo tú mismo »

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("/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>
Pruébalo tú mismo »

Cuándo usar cada valor

  • Usa fixed cuando quieras una imagen hero o un fondo de página completa que permanezca estático mientras el contenido se desplaza sobre él — la forma más sencilla de obtener un efecto tipo parallax sin JavaScript.
  • Usa local cuando un contenedor con scroll (un panel de chat, un listado de código, una tarjeta con overflow: auto) deba mantener su fondo pegado al contenido que se desplaza en lugar de al propio contenedor.
  • Deja el valor en scroll para los fondos de página ordinarios que deben moverse de forma natural con la página.

Problema: fixed en móvil

background-attachment: fixed tiene soporte limitado en navegadores móviles — especialmente en iOS Safari, donde o bien renderiza la imagen estirada o deshabilita el comportamiento fijo por completo por razones de rendimiento. Si necesitas un efecto parallax fiable en móvil, usa un elemento con posición fija separado en lugar de depender de esta propiedad. Siempre prueba los fondos fijos en un dispositivo táctil real.

Dado que la propiedad puede obligar al navegador a repintar el fondo en cada fotograma de scroll, el uso excesivo de fixed con imágenes grandes también puede perjudicar el rendimiento del scroll.

Propiedades relacionadas

background-attachment se suele establecer junto con otras propiedades de fondo:

Práctica

Práctica
¿Cuáles de los siguientes son valores válidos de la propiedad CSS background-attachment?
¿Cuáles de los siguientes son valores válidos de la propiedad CSS background-attachment?
Was this page helpful?