In questa lezione esaminiamo le proprietà relative alla gestione dello sfondo. 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.
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.
background-color
Definisce il colore di sfondo di un elemento. Questa proprietà non è ereditata.
Sintassi
selettore {background-color: valore;}
Valori
- 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
body { background-color: white; }
p { background-color: #FFFFFF; }
.classe1 { background-color: rgb(0, 0, 0)
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
- 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!
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
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.
Esempi
body { background-image: url(sfondo.gif); background-repeat: repeat; }
div { background-image: url(sfondo.gif); background-repeat: repeat-x; }
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
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
body { background-image: url(back_400.gif);
background-repeat: repeat-x;
background-attachment: fixed; }
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
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.
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
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.
Esempi
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
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.
Ultimi articoli CSS
Il posizionamento del contenuto generato da CSSIntrodurre le forme, come i triangoli, e posizionarle per abbellire... |
CSS3 Border-radius e Box-shadow su Internet Explorer con CSS3PIEUtilizzare CSS3PIE per implementare importanti proprietà CSS3 anche... |
Forme con i CSS: disegnare triangoliCome generare forme sfruttando solamente i CSS per disegnare triangoli |
Web Fonts: ottimizzazione cross-browserInserire font con la direttiva @font-face su tutti i browser con un... |
Progress Bar con CSS3Realizzare una barra di avanzamento cross-browser sfruttando la... |
Guide CSS
Guida CSS3Scoprire e usare al meglio tutte le novità dell'ultima versione dei... |
Guida CSS Tecniche essenzialiTesto, immagini, layout, form, liste, tabelle: soluzioni pronte per... |
Guida Interfacce web con PhotoshopQuesta guida mostra con semplici esempi come lavorare ad un layout e... |
Newsletter @CSS
Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Google AdWords Base27 Febbraio 2012 a Milano |
|
|
Corso Webmaster base12 Marzo 2012 a Milano |
|
|
Corso Webmaster base20 Febbraio 2012 a Roma |
|
|
Corso Google AdWords Base28 Marzo 2012 a Roma |