Ecco la lista delle proprietà, applicabili, a tutti gli elementi per ottenere diversificare le situazioni con l'uso degli sfondi:
Ciascuna di essa definisce un solo, particolare aspetto relativo allo sfondo di un elemento. La proprietà background, invece, è una proprietà a sintassi abbreviata con cui possiamo definire sinteticamente e con una sola dichiarazione tutti i valori per lo sfondo.
Definisce il colore di sfondo di un elemento. Questa proprietà non è ereditata.
Sintassi
Valori
Usando transparent come valore un elemento avrà come colore quello dell'elemento parente. Nell'esempio: il colore di un div è impostato su transparent, per cui esso sarà, per l'appunto, trasparente, lasciando emergere il colore dell'elemento parente (#div1).
Definisce l'URL di un'immagine da usare come sfondo di un elemento. Questa proprietà non è ereditata.
Sintassi
Valori
Usare none equivale a non impostare la proprietà: nessuna immagine verrà applicata come sfondo.
Usando questa proprietà da sola si ottiene lo stesso risultato che in HTML si aveva con l'attributo background (vedi esempio).
Piccolo consiglio. Una buona norma e il buon senso vogliono che quando si definisce un'immagine come sfondo si usi sempre anche un colore di sfondo e che questo colore consenta una lettura agevole del testo. Se le immagini sono disabilitate, ad esempio, il browser mostrerebbe il suo colore di sfondo predefinito: se questo è bianco e il nostro testo pure sarebbe evidentemente un disastro. Attenzione, dunque!
Con questa proprietà definiamo la direzione in cui l'immagine di sfondo viene ripetuta. Proprietà non ereditata.
Sintassi
Valori
L'esempio riporta i quattro diversi comportamenti con un'immagine di sfondo applicata ad una tabella.
Esempi
Con questa proprietà si imposta il comportamento dell'immagine di sfondo rispetto all'elemento cui è applicata e all'intera finestra del browser. Si decide, in pratica, se essa deve scorrere insieme al contenuto o se deve invece rimanere fissa. Proprietà non ereditata.
Sintassi
Valori
Questa proprietà consente risultati estetici di grande impatto ed è consigliabile, per ottenerne il meglio, usarla sia in combinazione con le altre proprietà sia con immagini grandi.
Esempi
Proprietà un pò complessa. Definisce il punto in cui verrà piazzata un'immagine di sfondo non ripetuta o da dove inizierà la ripetizione di una ripetuta. Si applica solo agli elementi blocco o rimpiazzati.
Sintassi
Valori
I valori possibili sono diversi. Tutti però definiscono le coordinate di un punto sull'asse verticale e su quello orizzontale. Ciò può avvenire nei seguenti modi:
L'esempio renderà tutto più chiaro. Per questo documento di esempio abbiamo usato queste impostazioni:
Significa che l'immagine apparirà a 50px dal bordo superiore e a 50px da quello sinistro della finestra. Si potevano usare invece dei pixel altre unità di misura o percentuali. Come al solito, la scelta delle percentuali assicura una maggiore affiidabilità a risoluzioni diverse. Allo stesso modo potevamo utilizzare le parole chiave. Se, ad esempio:
l'immagine di sfondo apparirà centrata in entrambe le direzioni (esempio).
E veniamo alla proprietà background. Con essa, ricordiamolo, possiamo definire in un colpo solo tutti gli aspetti dello sfondo. Per essere valida, la dichiarazione non deve contenere necessariamente riferimenti a tutte le proprietà viste finora, ma deve contenere almeno la definizione del colore di sfondo.
Sintassi
I valori non vanno separati da virgole. L'ordine non è importante, ma quello dato è il più logico e andrebbe rispetatto: si va in ordine di importanza.
Esempi
In questa pagina di esempio lo sfondo della pagina è stato così settato con l'uso della proprietà background: