CSS: Come impostare l’immagine di sfondo fissa


Bene, un visitatore del sito sito mi ha chiesto come ho fatto a mantenere l’immagine del phante fissa mentre si effettua lo scrolling della pagine. La cosa è abbastanza semplice e si trova nei fondamenti dell’utilizzo dei css ma sono sempre ben felice a rispiegare la cosa.

Il trucco è dovuto ad una semplice istruzione impostata all’interno del tag body del mio foglio di stile. Innanzitutto inseriamo l’immagine con:

background-image: url(https://www.phante.com/images/3.jpg);

una volta fatto questo indichiamo che l’immagine deve essere fissa e non scorrevole (che si imposta con scroll)

background-attachment: fixed;

Indichiamo poi che l’immagine di sfondo deve essere una ed una sola e che non deve essere ripetuta fino a rimpire tutto lo spazio, per fare questo aggiungiamo:

background-repeat: no-repeat;

le altre alternative sono repeat per rimpire tutto lo spazio a disposizione, repeat-x per riempire solo in senso orizzontale o repeat-y per riempire solo in orizzontale e a questo punto il gioco è fatto!

Però se abbiamo una piccola immagine la vedremo in alto a sinistra mentre nel mio caso la volevo in basso più accentrato. Per fare questo dobbiamo lavorare “di fino” e posizionare lo sfondo con il comando:

background-position: 25% 80%;

nel mio caso ho preferito utilizzare misure relative (con la percentuale) per meglio adattarmi a tutti gli schermi. Altrimenti possono anche essere usati misure assolute in pixel (px), unita tipografiche(em) o qualsiasi altra misura consentita dai css.

Per riferimento questo qui sotto c‘è l’estratto del foglio di stile per quanto riguarda il corpo, però questa tecnica vale per qualsiasi tag html.

body {
font-size:12px;
font-family: Verdana, "Lucida Grande", Tahoma, Helvetica;
background-color: #fff;
background-image: url(https://www.phante.com/images/3.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 25% 80;
}