Marketing Content

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?

  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 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!

Douglas Karr

Douglas Karr è CMO di ApriINSIGHTS e il fondatore della Martech Zone. Douglas ha aiutato dozzine di startup MarTech di successo, ha assistito nella due diligence di oltre 5 miliardi di dollari in acquisizioni e investimenti Martech e continua ad assistere le aziende nell'implementazione e nell'automazione delle loro strategie di vendita e marketing. Douglas è un esperto e relatore di trasformazione digitale e MarTech riconosciuto a livello internazionale. Douglas è anche autore di una guida per manichini e di un libro sulla leadership aziendale.
Torna a pulsante in alto
Chiudi

Blocco annunci rilevato

Martech Zone è in grado di fornirti questi contenuti gratuitamente perché monetizziamo il nostro sito attraverso entrate pubblicitarie, link di affiliazione e sponsorizzazioni. Ti saremmo grati se rimuovessi il blocco degli annunci mentre visiti il ​​nostro sito.