Da qualche tempo stiamo analizzando le proprietà dei fogli di stile CSS che permettono di definire lo sfondo di una pagina o di un altro elemento di HTML. La proprietà background-attachment va ad integrare quanto abbiamo visto nella precedente guida in merito all’uso delle immagini come sfondo.
La proprietà background-attachment
Una immagine utilizzata ad esempio come sfondo dell’elemento <body> di HTML può avere due diversi comportamenti rispetto al testo ed agli altri elementi in primo piano. L’immagine può rimanere fissa sullo sfondo del testo mentre quest’ultimo è libero di scorrere in primo piano, oppure può essere ancorata al testo e scorrere assieme ad esso. Questi due comportamenti sono definiti attraverso la proprietà background-attachment che può quindi assumere due diversi valori:
- background-attachment: scroll;
l’immagine di sfondo definita attraverso la proprietà background-image scorrerà assieme al testo. La dimensione dell’immagine andrà quindi scelta in modo da essere coerente con l’impostazione della pagina.
- background-attachment: fixed;
l’immagine di sfondo definita attraverso la proprietà background-image rimarrà fissa rispetto al testo scorrendo assieme a quest’ultimo. La dimensione dell’immagine andrà in questo caso scelta in modo da coordinarsi con il testo a cui è legata ed agli elementi a contorno.
Un esempio di foglio di stile CSS
Come abbiamo già accennato la proprietà background-attachment è tipicamente associata alla proprietà background-image. Nello stesso blocco di codice CSS potranno essere definite altre proprietà sul posizionamento e sulla ripetizione dell’immagine di sfondo attraverso l’uso delle proprietà background-position e background-repeat (ne abbiamo parlato in questa guida). Un esempio di codice CSS per la gestione di una immagine come sfondo avrà quindi una forma di questo tipo:
body {
background-image: url(sfondo.gif);
background-attachment: fixed;
background-repeat: repeat-x;
background-position: right center;
}