Inserire uno sfondo nel blog su Blogger

Purtroppo Blogger non permette facilmente di inserire un'immagine di sfondo nel blog, bisogna andare a modificare il nostro template. Tuttavia è un'operazione abbastanza semplice e veloce. Innanzitutto dovrete trovare l'immagine che volete mettere come sfondo, e pubblicarla su un sito in rete che permetta di ospitare le proprie immagini. Per lo scopo consiglio il servizio gratuito di Picasa, ma scegliete quello che preferite.

Dopodichè loggatevi nel blog e andate in Layout->Modifica HTML, e per prima cosa eseguite il backup del template: se commettete qualche errore, potrete sempre tornare indietro.

Nel codice html, cercate le seguenti righe (che potrebbero essere leggermente diverse, ma dovreste riconoscerle senza problemi):

body {
  background:$bgcolor;
  margin:0px;
  padding: 0;
  color:$textcolor;
  font:x-small Helvetica sans-serif; 
  font-size/* */:/**/small;
  font-size: /**/small;
  }

e modificatele aggiungendo la riga scritta in rosso:

body {
  background:$bgcolor;
  background-image:url(indirizzo dell'immagine);
  margin:0px;
  padding: 0;
  color:$textcolor;
  font:x-small Helvetica sans-serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  }

Sostituendo indirizzo dell'immagine con il link all'immagine che avete scelto come sfondo. Salvate il modello e visualizzate il blog per vedere il vostro nuovo sfondo.

Gestire la ripetizione dell'immagine

Seguendo quanto descritto sopra, l'immagine vi apparirà ripetuta: per evitare questo effetto aggiungete la seguente riga:

background-repeat:no-repeat;

subito sotto la nuova riga che avete aggiunto prima. Se volete che l'immagine si ripeta solo in orizzontale, la riga da aggiungere sarà invece la seguente:

background-repeat:repeat-x;

Per avere invece la ripetizione in verticale:

background-repeat:repeat-y;

Fate le vostre prove salvando e provando le varie combinazioni di background-repeat.

Gestire la posizione dell'immagine

Avrete notato che l'immagine viene sempre visualizzata in alto a sinistra, è possibile "spostarla" aggiungendo una terza riga, la seguente:

background-position:x% y%;

Sostituendo a x% e y% due diverse percentuali che "muoveranno" l'immagine: se le percentuali sono positive, l'immagine si sposterà rispettivamente verso destra e in basso, se le percentuali sono negative l'immagine si sposterà rispettivamente verso sinistra e in alto. Ad esempio la seguente riga:

background-position: -10% 20%;

sposterà l'immagine verso sinistra (facendola uscire dalla pagina) e in basso. A questo punto provate le varie combinazioni per vedere come questi due valori influiscono sulla visualizzazione dell'immagine.

Invece dei due valori percentuali, potete utilizzare le parole TOP, BOTTOM, LEFT, RIGHT, CENTER per decidere dove allineare l'immagine, tenendo conto che il primo valore indica il posizionamento orizzontale (può essere LEFT, RIGHT, CENTER) e il secondo quello verticale (può essere TOP, BOTTOM, CENTER, se non specificato varrà CENTER). Quindi per esempio la seguente riga:

background-position: center top;

visualizzerà l'immagine al centro in alto.

 

Gestire lo scorrimento dell'immagine

Se scorrete la pagina, vedrete che l'immagine si muoverà assieme alla pagina stessa. E' possibile però far sì che l'immagine rimanga sempre visibile: anche scorrendo la pagina, l'immagine resterà sempre lì. Per ottenere quest'effetto basta aggiungere la seguente quarta riga:

background-attachment: fixed;

Se andrete a visualizzare il vostro blog, vedrete che anche scorrendo la pagina l'immagine resterà sempre lì. Per tornare all'effetto di prima, basta rimuovere la riga o modificarla nel seguente modo:

background-attachment: scroll;

 

Proviamo tutto assieme

Rivediamo il codice html con tutt'e quattro le modifiche effettuate:

body {
  background:$bgcolor;
  background-image:url(indirizzo dell'immagine);
  background-repeat:repeat-y;
  background-position:center top;
  background-attachment: fixed;
  margin:0px;
  padding: 0;
  color:$textcolor;
  font:x-small Helvetica sans-serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  }

In questo caso le righe aggiunte faranno visualizzare l'immagine al centro, e partendo dall'alto si ripeterà in verticale, e rimarrrà fissa anche quando scorreremo la pagina.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!