Gran parte della resa finale di un layout è anche dovuta alla scelta di una background azzeccato.
Solitamente è sconsigliato scegliere background psichedelici, dai colori e dalle fantasie degne di un trip post droghezzo-party in quanto potrebbe essere molto apprezzato dal creatore …. molto meno da chi visita il vostro sito o blog.
Vediamo quindi come personalizzare lo sfondo con colori e immagini.
 

Con questa proprietà possiamo definire il colore da dare allo sfondo del sito, di un singolo box o di una porzione di testo.
I colori a disposizione sono molti e vengono definiti solitamente con i valori RGB, combinazioni alfa numeriche.
Se non avete idea a che numero corrisponda un determinato colore potete cercare tranquillamente su google ” colori HTML”, troverete di tutto, come ad esempio questo sito , pescato 2 secondi fa

Es.: background-color: #FF0000;

Possiamo altrimenti mettere un’immagine come sfondo. In questo caso quello che ci serve è ovviamente l’URL al quale corrisponde l’immagine.
N.B. anche se mettete un’immagine come sfondo è sempre bene dichiarare anche il colore di background, in questo modo se l’immagine per tot motivi non dovesse caricarsi, avete almeno uno sfondo colorato a tema piuttosto di un desolante chiazzone bianco, qualora non sia specificato nessun colore di background.

Es.: background-image: URL(http://www.miosito.it/immagine.jpg);

Questa proprietà ci serve per definire la posizione dell’immagine di background che abbiamo scelto.
Le possibilità che abbiamo sono:

• left : sinistra
• right : destra
• bottom : in basso
• top : in alto
• center : al centro

Es.: background-position: top;

Possiamo anche combinare queste proprietà; nel caso in cui volessimo mettere l’immagine in basso a destra dovremmo scrivere:

Es.: background-position: right bottom;

Leggermente diverso dal background image ha delle proprietà in più.
Oltre alla dichiarazione in cui andremo a scrivere l’URL dell’attachment ( background-attachment: URL (http://www.miosito.it/immagine.jpg;) possiamo dargli due posizioni alternative:

• fixed : l’immagine di sfondo rimarrà fissa dove l’abbiamo messa, sarà il resto del layout a “muoversi” quando scrolliamo su e giù con il mouse
• scroll : l’immagine seguirà lo scroll della pagina

Spesso si opta per un background ad “effetto” formato da un’immagine che ripetuta per tutta la superficie del box o del body dà l’impressione di essere uno sfondo compatto.
Un esempio può essere uno sfondo tutto a righine o pallini o effetto marmo.
Per fare ciò è sempre consigliabile scegliere un’immagine estremamente piccola e leggera in termini di byte, che sia un quadratino o una striscia che poi faremo ripetere in verticale, in orizzontale o in entrambe le direzioni.
Al contrario con questa proprietà possiamo anche decidere di far visualizzare l’immagine di sfondo una volta sola.
Ecco le opzioni:

• repeat : l’immagine si ripeterà in verticale e orizzontale
• no-repeat : l’immagine apparirà una volta sola
• repeat-y : l’immagine si ripeterà solo in verticale
• repeat-z : l’immagine si ripeterà solo in orizzontale

Es.: background-repeat: repeat-y;

« Back to Tutorials - L’abc del CSS