Teoría
Teoría

Propiedad background-attachment

Normalmente, la imagen de fondo se desplaza junto con el contenido del bloque. Esto es claramente visible en el mininavegador. Desplácese hacia abajo por la ventana y verá que el fondo sube hasta la parte superior.

Con la propiedad background-attachment, puede bloquear el fondo en su lugar y no se moverá al desplazarse.

Valores de propiedad:

scroll - el fondo se desplaza junto con el contenido. Este es el valor por defecto.
fixed - el fondo no se desplaza, está fijo en un lugar.

Este es un caso en el que es más fácil mostrar que explicar: realice la tarea y vea cómo cambia el comportamiento del fondo a medida que se desplaza.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>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

Ajuste el body al modo de imagen de fondo "fija".

Comprueba cómo se comporta la imagen de fondo desplazando la ventana del mininavegador.