Immagini di sfondo del corpo fatte facilmente

html

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?

  1. Scopri quanto è ampio il tuo contenuto. Esempio: 750px.
  2. Crea un'immagine nella tua applicazione di illustrazione (io uso Illustrator) più ampia dell'area del contenuto. Esempio: 800px.
  3. Imposta lo sfondo dell'immagine sullo sfondo che desideri avere su ogni lato del blog.
  4. Aggiungi una regione bianca sullo sfondo.
  5. Applicare un'ombra sulla regione bianca che fuoriesce da entrambi i lati della regione.
  6. 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.
  7. 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):
Sfondo con Illustrator

Ecco un esempio di come apparirebbe l'output con l'immagine di sfondo:
Esempio di 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 corrispondere al 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!

Commenti

  1. 1
  2. 2

Cosa ne pensi?

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati dei tuoi commenti.