Una sezione (… o l’intero corpo) del documento può essere arricchita con un colore di sfondo e/o con un’immagine di sfondo
Le proprietà disponibili sono
- background-color
- background-image
- background-repeat
- background-position
- background-attachment
Utilizzando queste proprietà, con immagini appropriate, si possono ottenere effetti molto interessanti di decorazione della pagina.
background-color
Ci sono più possibilità per esprimere lo stesso colore
- aqua, #00ffff, #0ff, rgb(0,255,255), rgb(0%,100%,100%)
TD { background-color: ... }
background-image
L’immagine si specifica tramite l’URL corrispondente (senza virgolette o apostrofi…)
TD { background-image: url(...)}
L’immagine piastrellerà tutta la sezione interessata.
background-repeat
Con background-repeat si specifica se l’immagine di sfondo deve essere ripetuta e come
- repeat, di default, l’immagine piastrella tutta la sezione
- repeat-x, … solo orizzontalmente
- repeat-y, … solo verticalmente
- no-repeat, nessuna ripetizione
background-position
Se l’immagine di sfondo non copre tutta la sezione allora con background-position si specifica come deve essere allineata orizzontalmente e verticalmente
- top left, di default, in alto a sinistra
- top center, in alto al centro
- top right, in alto a destra
- center left, al centro a sinistra
- center
center center, al centro al centro - center right, al centro a destra
- bottom left, in basso a sinistra
- bottom center, in basso al centro
- bottom right, in basso a destra
- ...% ...%, scostamenti in percentuale
- ...px ...px, scostamenti in pixel
background-attachment
- fixed
- scroll