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