REDAZIONE

Questo tutorial mostra come è possibile modificare lo sfondo del blog: cambiare il colore e sostituire il colore con un’immagine.

Apriamo il nostro blog a cui abbiamo associato uno dei template messi a disposizione nella sezione Presentazione > Template:

 
In questo template lo sfondo è verde, ma lo vogliamo sostituire con questa immagine di dimensioni 650x568 px:

Come fare? Innanzitutto carichiamo la nostra immagine nello spazio disponibile sul Blog e per farlo entriamo nella sezione Pannello di controllo > Gestione file:

Clicchiamo sulla cartella images e poi sul bottone Sfoglia per selezionare e caricare la foto dal nostro computer nel Blog.
Dopo pochi secondi vedremo la nostra immagine apparire nell’elenco dei file all’interno della cartella images.
Clicchiamo con il tasto destro del mouse sul nome del file e selezioniamo Copia collegamento (in Internet Explorer) o Copia indirizzo (in Firefox).

In questo modo abbiamo copiato l ‘URL, ovvero l’indirizzo web, della nostra immagine. Incolliamo il link in un file di testo e lo salviamo, ci servirà tra poco.

Ora dobbiamo inserire nel codice del Blog il link della nuova immagine che abbiamo caricato: andiamo in Presentazione > Opzioni avanzate e clicchiamo su Modifica modello del Foglio di stile. Si aprirà una finestra contenente il codice CSS. Cerchiamo queste righe di codice:

body {
    margin:0px;
    padding: 0px;
    background-color: transparent;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #000;
    background: #247272;
    font-size: 100%;
    word-spacing: normal;
    text-align: center;
}

 

La riga di codice che interessa a noi in questo momento è:

i numeri dopo i due punti rappresentano il valore esadecimale del colore verde che è ora presente come sfondo del blog.
Se si vuole semplicemente sostituire il colore verde con un altro, basta inserire il valore esadecimale del nuovo colore, ad esempio:

Per sostituire il colore con un’immagine, invece, dobbiamo modificare la riga background con:

dove al posto di “Link della immagine di sfondo” dovete inserire il link della vostra immagine caricata in Gestione file.
Clicchiamo sul bottone Salva queste informazioni e il risultato che avremo sarà questo:

In questo modo l’immagine di sfondo verrà ripetuta sia in orizzontale che in verticale infinite volte. Per fare in modo che si ripeta soltanto in orizzontale alla riga background dobbiamo aggiungere repeat-x:

dove #000000 è il valore esadecimale del colore nero (abbiamo scelto il nero perché è lo stesso colore di sfondo della nostra immagine) e deve essere inserito se non si vuole che si visualizzi uno sfondo bianco dove l’immagine non appare.

Per fare in modo che si ripeta soltanto in verticale:

 

Mentre, se vogliamo che la nostra immagine non venga ripetuta nello sfondo: