Lo sfondo delle pagine può essere impostato in 2 modi: impostando un colore o un’immagine. E questo di solito si imposto nel codice HTML. Ma si può utilizzare anche Cascading Stylesheets (CSS).
Nel file CSS esterno introdurre:
body {background-color:#000099;}
per impostare un colore di sfondo
body {background-image: url("background.jpg");}
per impostare un’immagine di sfondo.
Di solito l’immagine è più piccola della finestra del browser. E l’immagine si ripete verso destra e verso il basso. Ma se non si volesse ripetere l’immagine di sfondo,
background-repeat:no-repeat;
e l’immagine apparirà nell’angolo sinistro in alto.
Impostando il formato:
background-repeat:repeat-x;
e
background-repeat:repeat-y;
l’immagine si ripete in una sola direzione, verso destra (x) o verso il basso (y).
Si può anche associare un colore di sfondo:
body {background-image: url("background.gif");
background-repeat:repeat-x; background-color:#000099;}
Se si volesse lasciare l’immagine fissa, sempre ferma anche se il testo si scrollasse verso il basso, con
background-repeat:no-repeat;
si fa in modo che l’immagine non si ripeta.
Per centrare:
background-position: center center;
il primo parametro centra in orizzontale, il secondo in verticale.
background-attachment:fixed;
fissa l’immagine in una posizione.
Per fissare l’immagine in una posizione determinata:
background-position: right bottom;
oltre a center ci sono i parametri top, bottom, left e right.
Per fissare preciso sui pixel
background-position: 500px 30px;
fissa l’immagine 500 px da sinistra e 30 px dal margine superiore. Il primo valore è orizzontale, il secondo in verticale.
Per fissare l’immagine relativamente alla grandezza della finestra del browser:
background-position: 80% 10%;
80% da sinistra e 10% dall’alto in basso.
Sono possibili anche dei valori negativi, per lasciare una parte dell’immagine fuori dalla finestra:
body {background-image: url("background.gif");
background-position: -50px 50%;}
Articoli correlati: