Teoría
Teoría

La propiedad background-attachment

Normalmente, la imagen de fondo se desplaza junto con el contenido del bloque. Esto se nota muy bien en el mini navegador: si hacen scroll hacia abajo, verán que el fondo también sube.

Con la propiedad background-attachment se puede fijar el fondo para que no se mueva al hacer scroll.

Los valores son:

scroll: el fondo se desplaza junto con el contenido. Es el valor predeterminado.
fixed: el fondo no se desplaza y queda fijo en un mismo lugar.

Este es uno de esos casos en los que conviene más verlo que leerlo: hagan el ejercicio y observen cómo cambia el comportamiento del fondo al hacer scroll.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>La propiedad background-attachment</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </body> </html>

CSS

body { background-color: black; background-image: url("moon.jpg"); background-position: 50% 0; background-repeat: no-repeat; } .block { width: 192px; height: 256px; margin: 20px auto; background-color: #34495e; background-repeat: no-repeat; background-position: 50% 50%; border-radius: 5px; } .block:nth-child(1) { background-image: url("cat_clean.png"); } .block:nth-child(2) { background-image: url("cat_fight.png"); } .block:nth-child(3) { background-image: url("cat_hiss.png"); } .block:nth-child(4) { background-image: url("cat_poo.png"); }

ObjetivosRealizado

Definan un fondo fijo para body.

Comprueben cómo se comporta la imagen de fondo al desplazarse por la ventana del mini navegador.