28 maggio 2008

Inserire uno sfondo sul blog (Blogger)

Qui sono elencati un paio di siti da cui scaricare bei sfondi ad alta definizione.

Per modificare lo sfondo di blogger ci sono poche cose da fare:

andate in Modifica HTML (dalla pagina principale del blog cliccate su Personalizza->Layout->Modifica HTML) e cercate la parte di codice che inizia con "body {", si trova ad una decine di righe dall'inizio.

dovreste trovarvi di fronte a del codice più o meno come questo:

body {
background:#000;
margin:0;
padding:40px 20px;
font:x-small "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
text-align:center;
color:#ccc;
font-size/* */:/**/small;
font-size: /**/small;
}

Ora eliminate "color:#ccc", ed inserite (dove volete, basta che sia all'interno delle parentesi graffe di "body") le seguenti stringhe:

background-image: url(LINK DELLO SFONDO);
background-attachment: fixed;
background-position: bottom center;
background-repeat: no-repeat;


Questo è il codice che ho usato per il mio sfondo, ora vi spiego come personalizzarlo in base alle esigenze:

background-attachment: fixed; Blocca l'immagine dello sfondo, questo significa che quando "scrollerete" la pagina non vedrete lo sfondo muoversi. Per far muovere lo sfondo nello stesso momento in cui "scrollate" la pagina, basta non inserire quella stringa.

background-position: bottom center; Posiziona l'immagine di sfondo in basso nell'asse y e al centro nell'asse x.

Valori possibili:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right


se non inserite uno o entrambi i due parametri, verranno messi di default al valore "center".
Potete anche essere più specifici nella posizione inserendo un numero. Per esempio: background-position: 5% 80%;
I valori 0% 0% indicano l'angolo in alto a sinistra, mentre i valori 100% 100% indicano l'angolo in basso a destra. Se uno o entrambi i parametri vengono omessi, il valore di default è 50%.

background-repeat: no-repeat; sta ad indicare che l'immagine di sfondo non sarà ripetuta; per mettere l'immagine ripetuta basta non inserire questa stringa.
background-repeat:repeat-x; ripete l'immagine solo in orizzontale.
background-repeat:repeat-y; ripete l'immagine solo in verticale

13 commenti:

  1. CIAO! ho letto questa tua guida per inserire lo sfondo, ma nel mio blog proprio non vuole funzionare. ed io vorrei un effetto più o meno come il tuo! aiutami!!!

    RispondiElimina
  2. Vai nella modifica HTML e cerca la stringa "/* Use this with templates/template-twocol.html */" che si trova subito dopo la sezione iniziale "Variable definitions".
    Ti troverai questo pezzo di codice:


    ...
    body {
    background:#000000;

    margin:0;
    color:#cccccc;
    font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }
    ...


    ora, al posto della riga vuota che ho lasciato nel codice, inserisci questo:

    background-image: url(http://www.justreviews.biz/wp-content/uploads/2007/07/high-resolution-wallpaper.jpg);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;


    E ora dovresti vedere un'immagine (presa da una rapida ricerca su google) che è stata posizionata al centro dello schermo. Ciao!

    RispondiElimina
  3. Ci sono riuscita, però ora vorrei cambiare sfondo. Mi consiglieresti un sito adatto in cui trovare un bel link immagine?
    Grazie mille dell'aiuto!!
    Saluti Jessica.

    RispondiElimina
  4. Grande...
    Questo Post è stato davvero utile ed illuminante.
    Funzionato alla perfezione.
    Grazie Mille :)

    RispondiElimina
  5. Ciao ,grazie per il valido aiuto
    ora si che ho una grafica veramente figa..
    solo mi chiedevo perchè dici di cancellare "color:" funziona beninissimo tenendolo e anzi se lo cancello nn posso più modificare il colore della scrittura..
    ancora aggrazie!!! : )

    RispondiElimina
  6. Si, probabilmente lo e

    RispondiElimina
  7. necessita di verificare:)

    RispondiElimina
  8. La ringrazio per Blog intiresny

    RispondiElimina
  9. molto intiresno, grazie

    RispondiElimina
  10. leggere l'intero blog, pretty good

    RispondiElimina
  11. quello che stavo cercando, grazie

    RispondiElimina
  12. qualcuno sa dirmi dove sono finite le righe di programma per mettere musica nelle pagine web a si ma forseme le sono archiviate scusate.....

    RispondiElimina