Gestione Sfondo

Ecco la lista delle proprieta', applicabili, ed e' questa la prima grande innovazione dei CSS, a tutti gli
elementi:

1. background-color

body { background-color: white; }
p { background-color: #FFFFFF; }
.classe1 { background-color: rgb(0, 0, 0)

2. background-image
selettore { background-image: url(<valore>); }
body {background-image: url(sfondo.gif); }
div body {background-image: url(http://www.server.it/images/sfondo.gif); }


3. background-repeat
Con questa proprieta' iniziano le novita'. Essa consente di definire la direzione in cui l'immagine di
sfondo viene ripetuta. Proprieta' non ereditata.
Sintassi
selettore {background-repeat: <valore>;}
Valori
? repeat. L'immagine viene ripetuta in orizzontale e verticale. E' il comportamento standard.
? repeat-x. L'immagine viene ripetuta solo in orizzontale.
? repeat-y. L'immagine viene ripetuta solo in verticale.
? no-repeat. L'immagine non viene ripetuta.
Esempi
body { background-image: url(sfondo.gif); background-repeat: repeat; }
div { background-image: url(sfondo.gif); background-repeat: repeat-x; }

4. background-attachment
selettore {background-attachment: <valore>;}
Valori
? scroll. L'immagine scorre con il resto del documento quando si fa lo scrolling della pagina
? fixed. L'immagine rimane fissa mentre il documento scorre
Questa proprieta' consente risultati estetici di grande impatto ed e' consigliabile, per ottenerne il
meglio, usarla sia in combinazione con le altre proprieta' sia con immagini grandi.
Esempi
body { background-image: url(back_400.gif);
background-repeat: repeat-x;
background-attachment: fixed; }

5. background-position
I valori possibili sono diversi. Tutti pero' definiscono le coordinate di un punto sull'asse verticale e
su quello orizzontale. Cio' puo' avvenire nei seguenti modi:
- con valori in percentuale
- con valori espressi con unita' di misura
- con le parole chiave top, left, bottom, right
L'esempio rendera' tutto piu' chiaro.
body {
background-image: url(back_400.gif);
background-repeat: no-repeat;
background-position: 50px 50px;

oppure

body {
background-image: url(back_400.gif);
background-repeat: no-repeat;
background-position: center center;
}

}