CSS: Fogli di stile
Lo sfondo
Le proprietà dello sfondo, a differenza che nell'HTML, con i CSS possono essere applicate a ogni elemento e non sono ereditate:
- background-color (colore di fondo)
selettore {background-color: <valore>;}
- il valore è costituito da un codice colore
- con la parola chiave transparent come valore l'elemento avrà come colore quello dell'elemento genitore
- background-image (URL di un'immagine da usare come sfondo di un elemento)
selettore { background-image: url(<valore>); }
- il valore URL che punta all'immagine può essere assoluto o relativo
- la parola chiave none come valore (valore di default) equivale a non impostare la proprietà
- se il browser è settato per non mostrarele immagini, viene usato come sfondo il colore definito o ereditato
- background-repeat (definisce la modalità di ripetizione dell'immagine di sfondo)
selettore {background-repeat: <valore>;}
- col valore repeat l'immagine viene ripetuta in orizzontale e verticale
- col valore repeat-x l'immagine viene ripetuta solo in orizzontale
- col valore repeat-y l'immagine viene ripetuta solo in verticale
- col valore no-repeat l'immagine non viene ripetuta
- background-attachment (per definire se l'immagine deve scorrere col contenuto o rimanere fissa rispetto alla finestra del browser)
selettore {background-attachment: <valore>;}
- col valore scroll l'immagine scorre con il resto del documento
- col valore fixed l'immagine rimane fissa mentre il documento scorre
- background-position (definisce la posizione di un'immagine di sfondo non ripetuta o da dove inizierà la ripetizione di una ripetuta. Si applica solo agli elementi blocco o rimpiazzati)
selettore {background-position: <valore> o <valori>;}
- la resa può essere differente tra i vari browser
- i valori definiscono le coordinate di un punto sull'asse verticale e su quello orizzontale in percentuale, con unità di misura, o con le parole chiave top, left, bottom, right
- i valori normalmente sono due (x e y), uno solo invece definisce la stessa misura per entrambi gli assi
- background (proprietà a sintassi abbreviata con cui definire con una sola dichiarazione tutti i valori)
selettore {background: background-color background-image background-repeat background-attachment background-position;}
- la dichiarazione non deve contenere necessariamente tutte le proprietà, ma almeno la definizione del colore di sfondo