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:
Condividi su Facebook Condividi su Twitter Pubblica su 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!

13 commenti:

Carmen ha detto...

ciaoooo
grazie ancora
sei stato bravissimo

Anonimo ha detto...

Scusa, l'indirizzo dell'immagine, se si tratta di immagine che abbiamo sul pc, si ottiene cliccando il pulsante dx e poi proprietà? Sarebbe il percorso dell'immagine? Perché ho provato così ma non appare nulla.
Grazie
Paty

Tenebrae ha detto...

L'immagine deve essere pubblicata online, ho scritto due guide su due modi per farlo: skydrive e imageshack

fammi sapere!

Gioie Bestiali ha detto...

sei veramente molto bravo!!! usare i tuoi aiuti è veramente semplice ed intuitivo!!!

ho già inserito l'indirizzo mail come consigliato da te e ho messo anche l'immagine è stato facilissimo!!

complimenti!

sisifo ha detto...

Ciao sono sisifo
Sto leggendo piano piano tutti i tuoi consigli e devo dire che per non capirci un granchè sto creando
un bel blogghino.....
Grazie per i tuoi consigli e se vuoi vieni a trovarmi il mondodisisifo.blogspot.com
continua così sei un grande tutor

kia ha detto...

se riesci a salvarmi erigerò una statua in tuo onore!!

ascolta, ho un blog multi autore. vorrei che ad una determinata categoria si applicasse un determinato sfondo, mentre ad un'altra, un altro sfondo...
è possibile?

ps: mi hai già "salvato" innumerevoli volte, quindi, cmq grazie!

SABINA ha detto...

ciao! posso chiederti un altro consiglio in merito a questo post? io vorrei che una parte del testo avesse una sfondo diverso,pero' che avesse anche io bordo...mi puoi aiutare? grazie!

Il Mortificatore ha detto...

Ciao Tenebrae, come faccio ad inserire questa modifica proprio nel codice del blog così da far comparire sempre lo stesso sfondo a tutti i miei post senza preoccuparmi di farlo ogni volta che scrivo un articolo?

Grazie!

Tenebrae ha detto...

@mortificatore: ne ho parlato qui

BUSSOLA ha detto...

ciao ho seguito tutte le tue istruzioni ma nn riesco a fare nessuno modifica all'area post: nn riesco nè ad inserire uno sfondo nè a modificare il bordo
in più volevo chiedreti questo: come posso fare per posizionare la colonna dei post in mezza alle 2 sidebar?
grazie mille

cavoliamerenda ha detto...

una curiosità: con questo tricchizzino è possibile anche cambiare lo sfondo degli elementi delle colonne laterali facendoli apparire come dei box colorati? (inserendo il comando nel singolo widget intendo...)
E se invece di uno sfondo si volesse semplicemente cambiare il colore basterebbe inserire questo?
background:#numerodelcolore ;
forse inizio a capire...

Fangyaya ha detto...

fangyanting20150926
pandora jewelry, http://www.pandorajewelryoutlet.us.com/
cheap wedding dresses, http://www.cheap-weddingdresses.net/
nike air force 1, http://www.airforce1.us.com/
chanel handbags, http://www.chanelhandbagsoutlet.eu.com/
north face jackets, http://www.thenorthfaces.in.net/
ghd hair straighteners, http://www.ghdhairstraightenerssale.co.uk/
michael kors outlet, http://michaelkors.outletonlinestores.us.com/
nike mercurial, http://www.nikemercurial.org/
louis vuitton outlet, http://www.louisvuittonus.us.com/
oakley sunglasses, http://www.oakleysunglassescanada.com/
louis vuitton handbags, http://www.louisvuittonhandbags.org.uk/
football shirts, http://www.cheapfootballshirt.org.uk/
prada outlet, http://www.pradaoutlet.us/
michael kors wallet, http://www.michaelkorswallet.net/
ralph lauren uk, http://www.ralphlauren-outletonline.co.uk/
toms shoes, http://www.toms.us.com/
michael kors factory outlet, http://www.michaelkorsfactoryoutlets.in.net/
ugg boots, http://www.uggbootsclearance.in.net/
hermes birkin, http://www.hermesbirkin.org/
oakley sunglasses, http://www.oakley.in.net/
polo ralph lauren, http://www.poloralphlauren.us.org/
cheap jordans, http://www.cheapjordanshoes.in.net/
tiffany and co jewelry, http://www.tiffanyandco.in.net/
michael kors handbags, http://www.michaelkorshandbag.co.uk/

方松腾 ha detto...

cheap jordans
michael kors outlet online,michael kors,kors outlet,michael kors outlet,michael kors handbags,michael kors outlet online sale,michael kors handbags clearance,michael kors purses,michaelkors.com,michael kors bags,michael kors shoes,michaelkors,cheap michael kors
mulberry handbags
tory burch outlet online
swarovski crystal
canada goose coats
toms outlet
michael kors factory sale
giuseppe zanotti sale
nba jerseys wholesale
fitflops shoes
hollister pas cher
longchamp outlet online
cheap mlb jerseys
swarovski outlet
swarovski outlet


Prima di lasciare un commento, leggete qui

Posta un commento