Come inserire uno sfondo (background) tipo texture o tipo immagine in un blog su Blogger.

In un articolo di qualche giorno fa ho segnalato splendide texture da inserire come sfondo nel blog però ho solo accennato a come farlo effettivamente. Adesso voglio completare l’informazione.

Ci sono essenzialmente due modi di creare uno sfondo, il primo è quello di inserire un motivo che si ripeta in modo geometrico per tutto il blog mentre il secondo è quello di inserire un’immagine completa.

Consideriamo la prima ipotesi e carichiamo l’immagine che può essere anche molto piccola su un servizio di hosting tipo Skydrive.

Andiamo su Layout > Modifica HTML e cerchiamo il seguente codice

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
background: $bodybgColor url() repeat top right;
/* background-attachment: fixed; */
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}

Naturalmente a seconda dei modelli può essere diverso ma la zona in cui procedere è quella. Inseriamo la riga in rosso per farlo diventare così

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
  background-image:url(URL dell’immagine);
/* background-attachment: fixed; */
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}

L’immagine utilizzata l’ho presa da qui ed ecco come si presenta il blog in questo caso

con la parte esterna del modello riempita dall’immagine che abbiamo selezionato che si ripete per tutta la pagina. Se invece sostituiamo il codice con quest’altro

body {
  background:$bgcolor;
background-image:url(http://is.gd/1DZGV);
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

in cui is.gd/1DZGV è l’indirizzo dell’immagine, viene una completa copertura del blog, ovviamente alcuni dati possono essere diversi, però ci deve essere per quanto riguarda il background solo la riga colorata di blu, mentre noi abbiamo aggiunto quella colorata di rosso

Come vedete l’immagine si ripete sia in senso orizzontale che in quello verticale. In questi casi bisogna selezionare un’immagine e un colore del testo per il blog che formino un contrasto adeguato altrimenti non si riesce a leggere.

Se volete trovare degli sfondi da utilizzare per questa feature andate nel sito CG Textures che offre un’ampia scelta di motivi da inserire come sottofondo del blog.

Passiamo adesso al caso in cui volessimo inserire non un motivo ma un’immagine completa. In questo caso la prima cosa da fare è caricarla su un hosting e acquisirne l’indirizzo.

E’ sempre preferibile scegliere un’immagine che sia contrastante con il colore del testo. Ho scelto per il test questa immagine a cui ho diminuito il contrasto e aumentato la luminosità

In questo caso il codice diventa così

body {
  background:$bgcolor;
background-image:url(URL_immagine);
background-repeat:no-repeat;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

dove sono state aggiunte le due righe colorate in rosso. Ecco come si presenta in questo caso il blog

Indubbiamente molto carino, ma se lo scorrete verso il basso, vi accorgerete che finita l’immagine la pagina riprende il suo consueto colore e questo non è molto bello esteticamente

Per ovviare a questo inconveniente possiamo far sì che l’immagine rimanga sempre in primo piano e non scorra con la pagina. Il codice diventerà allora

body {
   background:$bgcolor;
  background-image:url(URL_immagine);
   background-repeat:no-repeat;
   background-position: center top;
   background-attachment: fixed;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

in cui le righe aggiunte in questo caso sono le quattro colorate di rosso. Le ultime due servono per tenere l’immagine sempre al centro in alto e per impedire che scorra con lo scorrimento della pagina.

In questo caso vedrete che scorreranno il testo e i widget ma l’immagine rimarrà comunque fissa. Se volete vedere l’effetto andate nel blog Come creare un blog con Blogger che ho usato come cavia.

Se avete un modello particolare ci possono essere anche personalizzazioni da fare sulla immagine di sottofondo. Ne elenco alcune

background-repeat:repeat-x;  per far ripetere l’immagine solo in senso orizzontale

background-repeat:repeat-y;  per far ripetere l’immagine solo in senso verticale

background-position:  30% 40%; per spostare l’immagine in una posizione indicata dalla percentuale colorata di rosso, e che può essere scelta a piacere, in senso orizzontale (30) ed in senso vericale (40)

background-position: center-top; è la posizione che ho inserito ma possiamo anche mettere al posto di center, left o right e al posto di top mettere bottom. Per esempio background-position: right-bottom; significa in basso a destra.

In ogni caso prima di provare queste modifiche scaricate un modello completo per fare un eventuale backup, oppure selezionate, copiate e salvate in un file di testo il codice che indica lo stile del body per poi eventualmente ripristinarlo.