Immagini di sfondo del corpo fatte facilmente
Una caratteristica interessante che troverai su molti siti è dove l'area del contenuto centrale sembra sovrapporsi alla pagina con un'ombra esterna dietro di essa. In realtà è un metodo abbastanza semplice per rendere piacevole il tuo blog (o un altro sito Web) con una singola immagine di sfondo.
Com'è fatto?
- Scopri quanto è ampio il tuo contenuto. Esempio: 750px.
- Crea un'immagine nella tua applicazione di illustrazione (io uso Illustrator) più ampia dell'area del contenuto. Esempio: 800px.
- Imposta lo sfondo dell'immagine sullo sfondo che desideri avere su ogni lato del blog.
- Aggiungi una regione bianca sullo sfondo.
- Applicare un'ombra sulla regione bianca che fuoriesce da entrambi i lati della regione.
- Imposta la larghezza dell'area di ritaglio di 1 pixel in altezza. Questo renderà l'immagine da scaricare bella e compatta per un rendering veloce.
- Produci l'immagine.
Ecco come l'ho costruito usando Illustrator (nota che ho l'area di ritaglio molto più alta ... solo così puoi vedere cosa sto facendo):
Ecco un esempio di come apparirebbe l'output con l'immagine di sfondo:
Ecco come applicare l'immagine usando il tuo tag body style nel tuo file
CSS file.sfondo: # B2B2B2 url ('images / bg.gif') repeat-y center;
Ecco una dissezione del tag di stile di sfondo:
- # B2B2B2 - imposta il colore di sfondo generale della pagina. In questo esempio, è grigio per abbinare il grigio sull'immagine di sfondo.
- url ('images / bg.gif') - imposta l'immagine di sfondo che desideri utilizzare.
- repeat-y: imposta la ripetizione dell'immagine sull'asse y. Quindi l'immagine di sfondo si ripeterà dall'alto verso il basso della pagina.
- center: imposta l'immagine al centro della pagina.
Bello e facile ... un'immagine, un tag di stile!