Aggiungere Immagini di sfondo per Blogger

Con questa guida, si dovrebbe essere in grado di aggiungere un'immagine di sfondo o foto al vostro blog, personalizzare la posizione della vostra immagine, ed avere una immagine statica di sfondo che rimane ferma quando si scorre il contenuto del blog.

Avrete bisogno di creare un'immagine. Trovate una foto che ti piace. Se avete bisogno di un programma di editing di fotografie è possibile cercare in rete.
È anche possibile utilizzare una piccola immagine, che può essere ripetuta in modo da coprire l'intera pagina.
Cercate di non utilizzare un file di immagine troppo grande altrimenti la pagina potrebbe richiedere un lungo tempo di caricamento.
Dopo la creazione di una immagine, avrete bisogno di caricarle su un servizio di file hosting on line. Potete leggere la guida all'utilizzo di host gratuiti come Utilizzare Google Page Creator o Google Gruppi per caricare files. Abbiamo anche una lista piuttosto completa di servizi di Hosting liberi nel nostro articolo I migliori servizi di hosting divisi per capienza. Scegliete tra questi servizi quello che è più veloce ed affidabile.

Infine, accedete al vostro blog, andate su "Layout" -> "Modifica HTML", scorrete fino a dove si vede questo codice:

body {
background:$bgcolor;



Cambiare il colore di sfondo

Se volete cambiare il colore di sfondo del vostro blog in un unico colore, è possibile specificare manualmente il valore del colore. Cercate on-line per avere i codici colore, o date un'occhiata in Codici esadecimali HTML per colori di sfondo per vedere se trovate il colore desiderato. Per esempio, se avete scelto un codice colore #B38481, modificate il codice di sopra con questo:

body {
background-color: #B38481;

Se volete cambiare solo il colore di sfondo della sidebar, aggiungete il codice di colore nella relativa voce sidebar:

#sidebar-wrapper {
background-color: #B38481;

Allo stesso modo, se si desidera un colore diverso per la vostra colonna principale dei post, aggiungete il codice di colore come segue:

#main-wrapper {
background-color: #B38481;

Nota che alcuni modelli potrebbero chiamare i loro stylesheet in maniera diversa. Il #sidebar-wrapper può essere chiamato #side-wrap o qualcosa di simile. In alcuni modelli come il TicTac modello, il colore di sfondo che si vede è dovuto ad una immagine di sfondo e l'inserimento di un codice di colore in questo modello non aiuta. Per avere un colore diverso, questa immagine di sfondo dovrà essere modificata...



Aggiungere un'immagine di sfondo

Il codice da inserire è questo:

body {
background-image: url(indirizzo URL della vostra immagine);

È anche possibile avere un immagine di sfondo solo per la vostra sidebar. Aggiungete il codice per l'immagine di sfondo codice come segue:

#sidebar-wrapper {
background-image: url(indirizzo URL della vostra immagine);

Per un immagine di sfondo solo nel vostro corpo principale dei post, aggiungete il codice seguente:

#main-wrapper {
background-image: url(indirizzo URL della vostra immagine);



Ripetere l'immagine di sfondo

Per impostazione predefinita, l'immagine viene ripetuta fino a riempire l'intero sfondo della pagina. Se si dispone di una piccola immagine, apparirà come un motivo stampato in background. A volte, si può scegliere di non avere l'immagine ripetuta. Se questo è il caso, potete inserire questo codice:

background-repeat: no-repeat;

In alternativa se volete che l'immagine sia ripetuta solo orizzontalmente utilizzate il codice seguente:

background-repeat: repeat-x;

Oppure verticalmente:

background-repeat: repeat-y;



Posizionare l' immagine di sfondo

Se si dispone di un'immagine che non è ripetuta, è possibile specificare la posizione esatta di questa immagine nella tua pagina. Il codice HTML da inserire è :

background-position: top left;

L'immagine apparirà nell'angolo in alto a sinistra della pagina. Gli altri possibili valori che è possibile utilizzare per sostituire "in alto a sinistra" sono:

top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;

Se non si vuole che l'immagine appaia tutta a sinistra, a destra o di centro, si può anche definire l'allineamento orizzontale e verticale sia in percentuale che in pixel. Utilizzate uno dei seguenti codici, dove x indica il valore orizzontale desiderato e y quello verticale:

x% y%;

oppure

x px y px;

esempio:

background position:12px 24px;

sarà una immagine posizionata con coordinate x=12 e y=24 (in pixel).



Immagine di sfondo statica

Dopo di che, si può specificare se si desidera che le immagini di sfondo rimangano in una posizione fissa, quando il contenuto del tuo blog viene fatto scorrere in basso. Per impostazione predefinita, l'immagine scorre con i contenuti. Per farla rimanere fissa, inserire il codice:

background-attachment: fixed;



Ricapitolando

Mettendo tutto insieme, l'eventuale codice CSS che avrete per il vostro modello personalizzato dovrebbe apparire come questo:

body {
background-color:#B38481;
background-image: url(URL IMMAGINE);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

Naturalmente, dopo aver aggiunto l'immagine di sfondo, sarà necessario modificare i colori del vostro testo in modo che spicchino sullo sfondo. Andate su Template -> Caratteri e colori per farlo.