CSS Tip #11 – Le immagini di sfondo
Scritto da Salvo il 24 marzo 2010 con 0 commenti
Dal titolo può sembrare un argomento ovvio o scontato, tuttavia il saper padroneggiare le proprietà che regolano le immagini di sfondo in CSS è ciò che ci permette di realizzare layout web graficamente interessanti e di ottimizzare l’utilizzo delle risorse.
In questo CSS Tip vedremo come utilizzare queste proprietà, analizzando alcuni esempi pratici e ricombinando alcune conoscenze apprese in precedenza.
Inserire un’immagine di sfondo
Partiamo dal concetto più basilare, come inserire un’immagine di sfondo, la sintassi è questa:
background-image: url(erba.png);
Il nome della proprietà è abbastanza auto esplicativo, mentre è obbligatorio inserire la parola chiave “url” dopo i due punti e indicare tra parentesi il percorso dell’immagine da inserire. Sono accettati i principali formati di file grafici (jpg, gif, png) mentre a differenza del tag <img> in Html se l’immagine non dovesse essere caricata, o l’url inserito è sbagliato, non apprarirà alcuna icona di errore, semplicemente al posto dell’immagine di sfondo non vedremo niente!
Ripetere o non ripetere
Di default quando inseriamo un’immagine di sfondo, questa viene ripetuta in automatico sia in orizzontale che in verticale, tuttavia possiamo reimpostare questo valore usando la proprietà:
background-repeat: repeat-x;
questo “background-repeat” accetta 4 valori: repeat (ripeti – il valore impostato di default), no-repeat (non ripetere – l’immagine viene applicata una volta sola senza ripetizioni), repeat-x e repeat-y (rispettivamente ripeti in orizzontale e ripeti in verticale).
Nell’esempio indico all’immagine di ripetersi in orizzontale, il risultato è quello dell’immagine dei ciuffetti d’erba ripetuti che simula un prato che trovate nel Earth Hour Pack 2010.
Posizionare le immagini
Se utilizzate il “background-repeat: no-repeat” su un oggetto abbastanza grande (come per esempio il body del documento), vedrete che l’immagine rimane fissata in alto a sinistra. Anche questo è un valore standard e anche questo può essere modificato:
background-position: center top;
Usando la proprietà “background-position” (posizione dello sfondo) potrete passare due valori per indicare il posizionamento orizzontale (left, right, center – sinistra, destra, centro) o verticale (top, bottom, center – sopra, sotto, centro) determinando cosi la posizione dell’immagine nello sfondo. Attenzione, questo posizionamento dello sfondo non va confuso con i posizionamenti Css (absolute, relative, ecc..) che sono tutt’altra cosa!
Un po’ di colore…
Ci stacchiamo un attimo da discorso “immagini” per evidenziare un’altra proprietà che regola lo sfondo, il colore di sfondo:
background-color: #222222;
dopo il nome della proprietà inseriamo un valore esadecimale del colore con il quale verrà riempito lo sfondo dell’oggetto al quale applichiamo questa proprietà, combinando “background-color” con un’immagine di sfondo in Png e trasparente possiamo ottenere degli effetti interessanti 
non indicando un colore di sfondo, esso sarà trasparente.
…e infine, la scorciatoia!
Se tutte queste prorprietà vi sembrano troppe. provate a inserire tutti i valori visti poco fa in un’unica proprietà “background”:
background: url(erba.png) no-repeat #222222 center top;
cosi in una sola riga stiamo indicando 1) l’immagine da usare 2) la ripetizione 3) il colore di sfondo 4) il posizionamento verticale e orizzontale. La cosa importante in questo caso è ricordarsi di usare la proprietà “background” e basta ( e non background-repeat o altre) e di separare i valori con uno spazio, l’ordine di inserimento non è assolutamente rilevante!
Come sempre, trovate una referenza totale dei Css Tips nel CSS Tips - File di riferimento .
Articoli correlati:
- CSS tip #3 – Quelle 5 cose da sapere… Continuo la mia piccola serie sui consigli (tips) per Css, restando ancora su argomenti di base in quanto sto avendo un buon feedback sul tema e sul livello trattato. Ricordo [...]...
- CSS Tip #9 – Css di Natale! In quest’edizione “speciale” dei Css tips, dedico qualche minuto a spiegare come ho scritto i Css per il “Christmas Pack 2009″. Come vedrete, molte delle proprietà che uso per inserire [...]...
- CSS Tip #17 – Sfumature che passione! Fin dall’alba del webdesign basato sui Css una delle prime cose che lasciò un po l’amaro in bocca riguardo questo linguaggio era l’impossibilità di creare sfumature. Abbiamo passato anni a [...]...
Riguardo Salvo...
Web designer/developer (aka Interactive Designer) dal 2006, ho lavorato in varie aziende che operano dall'e-commerce alla comunicazione multimediale, sono stato speaker a conferenze come Better Software, Codemotion e due WordCamp. Dal 2010 insegno linguaggi web alla scuola Mohole di Milano.
Se ti e' sembrato utile perche' non mi offri un caffe'?
Tutto quello che trovi su MoebiusMania.net puo' essere utilizzato liberamente e gratuitamente, se magari hai trovato qualcosa di particolarmente utile puoi mostrare il tuo apprezzamento con una minuscola donazione con Paypal o cliccando sui banner!
Quanto silenzio qui... pare che non ci siano commenti! Perche' non scrivi tu il primo?