Inserire uno sfondo nei post del blog

Con un piccolo trucco è possibile inserire uno sfondo diverso in ogni singolo post che pubblichiamo sul blog, magari in linea con quello che abbiamo scritto. Per prima cosa scegliamo l'immagine che vogliamo come sfondo e pubblichiamola su un servizio in rete come Picasa, stando attenti a non scegliere un'immagine troppo colorata che impedirebbe di leggere il testo dell'articolo.

 

Creiamo un nuovo post e scriviamo quello che vogliamo. Prima di pubblicarlo (io consiglio di inserire il codice html dopo aver scritto il post, ma potete farlo anche prima) andiamo in Modifica HTML e inseriamo prima di tutto la seguente riga:

<div style="background:url(indirizzo dell'immagine);">

sostituendo indirizzo dell'immagine con il link all'immagine che vogliamo come sfondo, e in fondo all'articolo come testo inseriamo:

</div>

Se visualizziamo l'anteprima del post, vedremo già il post con lo sfondo che abbiamo scelto, ed eventualmente sistemare l'immagine (o cambiarla) prima di pubblicare il post. Inserendo le righe sopra, l'immagine verrà ripetuta per tutto il post, ma possiamo cambiare la prima riga per avere effetti diversi:

• <div style="background:url(indirizzo dell'immagine) no-repeat;"> (l'immagine non si ripete)
• <div style="background:url(indirizzo dell'immagine) repeat-y;"> (l'immagine si ripete solo in verticale)
• <div style="background:url(indirizzo dell'immagine) repeat-x;"> (l'immagine si ripete solo in orizzontale)
• <div style="background:url(indirizzo dell'immagine) no-repeat center;"> (l'immagine viene messa al centro senza ripetizioni)
• <div style="background:url(indirizzo dell'immagine) repeat-y center;"> (l'immagine viene messa al centro e si ripete in verticale)
• <div style="background:url(indirizzo dell'immagine) no-repeat bottom center;"> (l'immagine viene messa al centro in basso)
• <div style="background:url(indirizzo dell'immagine) no-repeat bottom center;"> (l'immagine viene messa al centro in alto)

Insomma, potrete sbizzarrirvi con le varie combinazioni di repeat, no-repeat, repeat-y, repeat-x, bottom, center, top.

Con Blogger è possibile inserire questo codice automaticamente in tutti i nuovi post, andando in Impostazioni -> Formattazione e inserendo le due righe di codice in Modello post: quando create un nuovo post, vi trovrete il codice già inserito ed eventualmente dovrete solo cambiare l'indirizzo dell'immagine. Il testo dell'articolo va inserito tra la prima riga di codice e il </div> finale. Premetto comunque che io consiglio di inserire il codice manualmente in ogni nuovo post piuttosto che inserirlo nel Modello post.

Se volete inserire lo sfondo solo in una parte del post, come ho fatto io in questo, basta mettere il </div> finale nel punto dovete volete che finisca lo sfondo.

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!