sabato 13 gennaio 2007

Basilari x i background

allora... dato ke ultimamente ho dovuto cambiare lo sfondo ad un certo sito, m è venuta l'idea d parlare ai miei lettori delle proprietà del background in blogger (che assomigliano molto a quelle del CSS).
allora, x mettere un background ad una sezione del vostro blog (ke può essere l'intero body (in quel caso è bene scegliere una img piccola da replicare su tt il blog ma ne parleremo dopo), una sola colonna, l'header o tutte le colonne) abbiamo una semplice proprietà, che si chiama (ma indovinate un pò?) background. di essa possiamo specificare il colore, oppure l'immagine o anche altre cose.
allora, x definire il colore si scrive:
background:(codice o nome del colore);.
infatti si dovrebbe poter inserire il colore di sfondo in tre modi diversi:
1- usando il codice html del colore
2- scrivendo il colore in rgb (sintassi: rgb(numR,numG,numB))
3- scrivendo il nome usato x identificare il colore in html (ma nn sono sicuro)
quindi: background: (il colore in uno dei modi possibili);
altra cosa importante è l'uso di immagini di sfondo (chi mai si accontenterebbe di un colore quando può utilizzare un'immagine ben più bella?).
Allora, l'uso d immagini d sfondo prevede ke si abbia un'immagine hostata da qlk parte (se nn sapete cs vuol dire hostata, beh prima fustigatevi e poi andate a rileggervi i miei post precedenti).
una volta ke si ha un url x qst img, la sintassi da usare x averla cm sfondo è:
background: url("url dell'immagine");
dato xò ke spesso ci tokkerà di ripetere qst immagini lungo tutto il blog (orizzontalmente,verticalmente o in tutti i sensi), forse è meglio se parliamo della proprietà repeat.
dunque, possiamo appunto utilizzando repeat far ripetere l'immagine all'interno del nostro blog...la sintassi da usare è:
background: url("url dell'immagine") repeat; (*se vogliamo ke l'immagine si ripeta sia in verticale ke in orizzontale*)
background: url("url dell'immagine") repeat-y; (*in questo modo si ripete solo in verticale*)
background: url("url dell'immagine") repeat-x; (*ripetizione in orizzontale*)
background: url("url dell'immagine") no-repeat; (*quando non volete ke si ripeta... non è xò necessario, se siete dei precisini...*)
si può poi dare anke una posizione fissa o fare in modo che scenda o salga allo scrolling del mouse al nostro background (solo se come proprietà ha no-repeat), grazie alla proprietà attachment: in pratica basta scrivere rispettivamente scroll o fixed dopo l'url ecc:
background: url("url dell'immagine") no-repeat fixed; (*in questo modo l'immagine si muoverà con la pagina*)
background: url("url dell'immagine") no-repeat scroll; (*in questo modo l'immagine rimarrà ferma*)
ultima cosa di cui si deve parlare è la posizione. possiamo infatti anche porre un'immagine fissa in un determinato punto da noi scelto ( ad esempio x creare un titolo o qcs del genere).
cosa c'è da fare: come sempre, si scrive la sintassi come prima, cioè background: (img) (proprietà1) (proprietà2)... (proprietà n);
anke qui c'è più di un modo x trattare con le posizioni:
o si scrivono a parole tipo la formattazione di word (top left, top right, top center,center left,center right, center center, bottom left,bottom right,bottom center)(se si specifica solo la prima la seconda di default viene considerata center), oppure si può dare la posizione usando le percentuali od i pixel:
background: url("immagine") no-repeat 50% 50%; posizionerà (o almeno dovrebbe) il primo angolo dell'immagine giusto al centro della sezione presa in considerazione.
background: url("immagine") no-repeat 250 px 250 px; questo posiziona il primo angolo dell'immagine pixel a destra e 250 pixel in basso rispetto all'angolo in alto a sinistra della sezione. bisogna ricordarsi xò che il primo numero è sempre la x ed il secondo la y.
detto questo, vi lascio, almeno x oggi.

0 commenti: