Di sicuro vi sarà capitato di vedere alcuni siti in cui c’è un’immagine di sfondo che rimane bloccata in un determinato punto mentre scorrete la pagina per leggere il testo. Questo effetto si ottiene con la proprietà CSS “background-attachment” dando un valore “fixed”. Ecco il codice CSS per creare l’effetto:
<style type="text/css">
body {
background-image:url(sfondo-immagine.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background -position:center;
}
</style>.“background-image: url('/sfondo-immagine.jpg');” definisce la directory dove si trova l’immagine che vogliamo visualizzare. “background-repeat:no-repeat;” definisce se l’immagine deve essere ripetuta o meno, in questo caso non verrà ripetuta. “background- attachment:fixed;” è la proprietà principale che ci permette di bloccare la nostra imagine in un determinato punto. “background-position:center;” stabilisce la posizione specifica in cui si troverà l’immagine. Bisogna dire che al posto di “center” si può specificare la posizione in altri modi es: percentuale o pixels.
Per vedere l’effetto dal vivo potete visitare il sito di un laboratorio orafo realizzato tempo fa (le3d-gioielli.com). L’effetto è sulla scritta-immagine “le 3d gioielli” sulla destra. Un’ultima cosa importante è che questa proprietà CSS non viene supportata da Internet Explorer 6 e precedenti.
