Immagini di sfondo per i modelli predefiniti di Blogger

giovedì 7 febbraio 2008 Lascia un Commento

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.

18 commenti »

  • MuFFLiN ha scritto:  

    Io no ci sono riuscito...
    Da me quella parte inizia così..:
    body {
    background:#123;
    margin:0;
    text-align:center;
    line-height: 1.5em;ecc...
    chi mi puo' aiutare...!?!?!

  • Jack Slater ha scritto:  

    Ciao, spiegami pure cosa vuoi ottenere.
    Spiegami anche le modifiche da te effettuate...

  • Anonimo ha scritto:  

    Ok io vorre inanzitutto cambiare sfondo ee non ci sono riuscito (vedi post precedente) e poi cambiare lo spazio dove c'è il titolo con un'immagine fatta da me...
    Per rendere l'idea in che condizioni è ti lascio il link...
    www.thekingdomofmufflin.blogspot.com... grazie ciauzz-..

  • Alessandra ha scritto:  

    Utilissimo!!! Grazie mille!

  • Helga ha scritto:  

    ok cambiati i colori

  • XXIII ha scritto:  

    ciao...davvero utile il tuo blog m ha aiutato a capire o quasi come funzione blogspot :P cmq vorrei kiederti se sai quali sono le misure standart degli sfondi che posso personalizzare...cioè come questo...http://www.uhlikethat.com/ mi piacerebbe far un bello sfondo xil mi blog....sai qualcosa a riguardo?:P gracias in anticipo..ciao!

  • Marco Crupi ha scritto:  

    Davvero un ottima guida, la salvo tra i preferiti ;D

  • Anonimo ha scritto:  

    sei un genio! mi hai aperto un mondo! grazie infinite! il blog é la mioa casa e volevo da molto arredarlo come meglio credo..smack!

  • Jack Slater ha scritto:  

    Di nulla, presto aggionerò questa guida, per renderla un pò più scorrevole :)

  • Giulia Viggiani ha scritto:  

    io ho fatto la prima parte, il mio template è this away rose e le righe sono queste
    body {
    margin: 0;
    text-align: center;
    min-width: 987px;
    background: #C94093 url(...) repeat-x;
    $startSide top;
    color: $textColor;
    font-size: small;
    }
    Tra parentesi ho inserito l'indirizzo dell'immagine, ora mi si ripete in orizzontale ma fino ad una certa altezza del blog, poi ritorna il colore fucsia, come faccio a farlo ripetere su tutta la pagina?

  • Giulia Viggiani ha scritto:  

    ok risolto, ho tolto la x, che scema!!!

  • amatamari© ha scritto:  

    Grazie per questo tuo chiarissimo post!!!
    :-)

  • Katy ha scritto:  

    Ciao! Io ho lo stesso template di giulia e le righe che ho sono come le sue. Ho provato a fare come lei, a inserire l'immagine tra parentesi e a togliere la x, ma l'immagine che ho scelto, cariicata sull'host uptiki, appare per un'attimo quando pigio anteprima replicata correttamente su tutto lo sfondo e poi scompare subito e ritorna lo sfondo tutto fuxia. Non so cosa ho sbagliato....
    Ciao e grazie per quello che fai per noi "ignoranti" del web...

  • Ilaria Isidori ha scritto:  

    ciao.. non sono molto esperta in materia ma vorrei dare uno sfondo personalizzato l mio blog..ho aperto "layout" e "modifica html" ... ora mi puoi spiegare in maniera moooolto semplice come faccio a mettere come sfondo al mio blog un'immagine che ho nel mio pc in formato JPG?
    GRAZIE

  • francy ha scritto:  

    ciao...abbi pietà di me, io son 2 giorni che tento, ma mica ci riesco... seguo per filo e per segno le tue indicazioni e nn capisco dove sbaglio!

  • Unknown ha scritto:  

    Complimenti davvero ho trovato le spiegazioni molto semplici e non ho avuto nessun problema!!

  • Unknown ha scritto:  

    Ma perchè ogni tanto scompare lo sfondo che ho inserito?? Mi è successo tre volte e questo perchè ogni volta la foto che avevo caricato aveva un URL diverso. Com'è possibile?

  • Thana ha scritto:  

    Ciao...scusami, ma non ci riesco! Cioè, ho fatto tutti i passaggi come li hai scritti, ma lo sfondo non appare...come faccio?

  • Commenta!

    Lascia il tuo commento riguardo l'articolo!