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