background-attachment

<< background-position Selectores II >>

Indica si la imagen se debe mover al hacer scroll en la página o quedarse fija donde está. Sus valores son:

  • scroll: La imagen se comportaría como esperamos, es decir, al hacer scroll se quedaría en su sitio junto con el resto de contenidos (opción por defecto si no ponemos esta propiedad).
  • fixed: La imagen bajaría y subiría con nosotros al hacer el scroll (hasta que ya no fuera visible el elemento que la contiene).
body{
     background-image: url("peter.gif");
     background-repeat: no-repeat;
     background-position: top center;
     background-attachment: scroll;
}

Es posible establecer todas estas propiedades anteriores en una sola regla de CSS a modo de atajo, donde aunque no es estricto se recomienda utilizar el siguiente orden:

background: <color> <imagen> <repeat> <attachment> <position>;

body{
    /* ¿Por qué position va al final? */
    background: lightcyan url("peter.gif") no-repeat scroll top center ;
}

<< background-position Selectores II >>