Teoria
Teoria

Proprietà background-attachment

Di solito l'immagine di sfondo scorre insieme al contenuto del blocco. Questo è chiaramente visibile nel mini-browser. Scorrendo la finestra verso il basso, si vedrà lo sfondo salire in alto.

Con la proprietà background-attachment, è possibile bloccare lo sfondo in posizione e non spostarlo durante lo scorrimento.

Importanza della proprietà:

scroll - lo sfondo viene fatto scorrere insieme al contenuto. Questo è il valore predefinito.
fixed - lo sfondo non scorre, è fisso in un punto.

In questo caso è più facile mostrare che spiegare: eseguite l'operazione e osservate come cambia il comportamento dello sfondo durante lo scorrimento.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="it"> <head> <meta charset="utf-8"> <title>Proprietà 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"); }

ObiettiviFatto

Impostare il body in modalità immagine di sfondo "ferma".

Verificate il comportamento dell'immagine di sfondo facendo scorrere la finestra del mini-browser.