CSS, sfondo fisso o scorrevole con background-attachment

di Michele Costanzo Commenta

CSS background-attachment
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;
}

Lascia un commento

Il tuo indirizzo email non verrà pubblicato.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>