In questa lezione esaminiamo le proprietà relative alla gestione dello sfondo con il CSS di base. Sin dalle origini, possiamo inserire un'immagine o un colore di sfondo direttamente nel markup HTML. La scelta si restringe comunque a due elementi: il corpo principale della pagina (<body>) o le tabelle.
Un'altra limitazione riguarda il comportamento delle immagini di sfondo in HTML: esse vengono infatti ripetute in senso orizzontale e verticale fino a riempire l'intera area della finestra, del frame o della tabella. Proprio questo comportamento ha sempre favorito la scelta di piccole texture in grado di dare la sensazione visiva dell'uniformità.
Grazie ai CSS questi limiti vengono spazzati via e le possibilità creative, compatibilità permettendo, sono davvero infinite.
Tutte le proprietà CSS di background
Ecco la lista delle proprietà per lo sfondo, applicabili, ed è questa la prima grande innovazione dei CSS, a tutti gli elementi:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
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. La analizeremo alla fine. Prima è necessario chiarire significato e sintassi delle proprietà singole.
CSS: background-color
Definisce il colore di sfondo di un elemento. Questa proprietà non è ereditata.
Sintassi generale del CSS
selettore {background-color: valore;}
Valori di background
- un qualunque colore
- la parola chiave transparent
Usando transparent come valore un elemento avrà come colore quello dell'elemento parente. Nell'esempio: il colore di #div2 è impostato su transparent, per cui esso sarà, per l'appunto, trasparente, lasciando emergere il colore dell'elemento parente (#div1).
Esempi di codice CSS
body { background-color: white; }
p { background-color: #FFFFFF; }
.classe1 { background-color: rgb(0, 0, 0)
CSS: background-image
Definisce l'URL di un'immagine da usare come sfondo di un elemento. Questa proprietà non è ereditata.
Sintassi
selettore { background-image: url(valore); }
Valori di background-image
- un URL assoluto o relativo che punti ad un'immagine
- la parola chiave none. Valore di default.
Usare none equivale a non impostare la proprietà: nessuna immagine verrà applicata come sfondo.
Esempi
body {background-image: url(sfondo.gif); }
div body {background-image: url(http://www.server.it/images/sfondo.gif); }
Usando questa proprietà da sola si ottiene lo stesso risultato che in HTML si aveva con l'attributo background (vedi esempio).
Un 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!
CSS: background-repeat
Con questa proprietà iniziano le novità. Essa consente di definire la direzione in cui l'immagine di sfondo viene ripetuta. Proprietà non ereditata.
Sintassi di background-repeat
selettore {background-repeat: valore;}
Valori
- repeat. L'immagine viene ripetuta in orizzontale e verticale. È 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.
L'esempio riporta i quattro diversi comportamenti con un'immagine di sfondo applicata ad una tabella.
Esempio nel CSS
body { background-image: url(sfondo.gif); background-repeat: repeat; }
div { background-image: url(sfondo.gif); background-repeat: repeat-x; }
CSS: background-attachment
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 di background-attachment
selettore {background-attachment: valore;}
Valori
- scroll. L'immagine scorre con il resto del documento quando si fa lo scrolling della pagina (esempio)
- fixed. L'immagine rimane fissa mentre il documento scorre (esempio)
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 con background-attachment
body { background-image: url(back_400.gif);
background-repeat: repeat-x;
background-attachment: fixed; }
CSS: background-position
Proprietà un po' 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. Attenzione alla compatibilità e alla resa, non omogeena, tra i vari browser. Proprietà non ereditata.
Sintassi
selettore {background-position: valoreOriz | valoreVert;}
Valori di background-position
I valori specificano le coordinate di un punto sull'asse verticale e su quello orizzontale e possono essere espressi con diverse unità di misura e modalità:
- con valori in percentuale
- con valori espressi con unità di misura
- con le parole chiave top, left, bottom,right
L'esempio renderà tutto più chiaro. Per questo documento di esempio abbiamo usato queste impostazioni:
body {
background-image: url(back_400.gif);
background-repeat: no-repeat;
background-position: 50px 50px;
}
Significa che l'immagine apparirà a 50px dal bordo superiore e a 50px da quello sinistro della finestra.
Invece dei pixel potevamo utilizzare altre unità di misura o le percentuali. La scelta delle percentuali ci assicura una maggiore affidabilità a risoluzioni diverse.
In alternativa avremmo potuto utilizzare le parole chiave, come in questo esempio:
body {
background-image: url(back_400.gif);
background-repeat: no-repeat;
background-position: center center;
}
L'immagine di sfondo apparirà centrata in entrambe le direzioni (esempio).
Logica vuole, trattandosi di definire le coordinate, che si impostino due valori. Definendone uno solo esso sarà usato sia per l'asse orizzontale che per quello verticale.
Scrittura sintetica delle proprietà di background
Esaminiamo finalmente la 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 CSS
selettore { background: background-color
background-image
background-repeat
background-attachment
background-position;
}
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.
Esempio
In questa pagina di esempio lo sfondo della pagina è stato così settato con l'uso della proprietà background:
body { background: white url(sfondo.gif) repeat-x fixed; }
Link utili per approfondire il CSS
Usare il background - Introduce ad un uso avanzato degli sfondi nel layout e all'utilizzo di effetti come gradienti o pattern.
Creare sprite CSS - Sfruttare la proprietà background per creare bottoni e sfondi animati.
Sfondi a tutta pagina con i CSS - Superare i limiti del classico background e creare sfondi che occupano l'intera area del viewport del browser.
Lo sfondo con i CSS - Introduzione all'uso dei CSS nella Guida HTML.