CocaDozzer
Moderator
 Din: Garda de Fier
Inregistrat: acum 16 ani
Postari: 197
|
|
Introduzione alla background-position
La proprietà background-position stabilisce come vengono posizionati gli sfondi. Accetta tre possibili tipologie di valori:
Keyword (parole chiave)
Pixel e altre unità di misura
Percentuali
Prima di vedere come sia possibile specificare tali valori, è importante fissare alcuni concetti. Il primo aspetto da non trascurare è che il background fa riferimento alla padding area di un elemento, ovvero all'area effettiva di contenuto più l'eventuale padding che la circonda.
Per quanto riguarda il posizionamento del background, c'è da evidenziare che se viene specificato un solo valore per la proprietà, questo si riferisce alla coordinata sull'asse orizzontale (x) mentre la coordinata sull'asse verticale (y) sarà di default il 50%. Quando vengono specificate le coordinate per i due assi, dovranno essere nell'ordine coordinata-x e coordinata-y.
La proprietà background-position può essere infine accorpata nello shorthand background, che contiene in sé tutte le proprietà sugli sfondi e consente un risparmio notevole di dichiarazioni CSS. Ecco un esempio:
body{background: url(corner.jpg) no-repeat fixed 0 100%}
In questo caso l'immagine corner.jpg verrà posizionata senza ripetizioni né verticali né orizzontali, sarà fissa rispetto all'elemento body (ovvero non soggetta allo scrolling) e sarà disposta al valore 0 sulla coordinata x e al 100% sulla coordinata y.
Posizionamento dello sfondo con le keyword
Il primo possibile modo per sistemare gli sfondi è attraverso l'uso delle parole chiave. Queste sono left, center e right per quanto riguarda l'asse orizzontale; top, center e bottom per l'asse verticale:
Figura 1, Le keyword per il background.
I piccoli quadratini più scuri rappresentano le possibili disposizioni di uno sfondo: sarà facile a questo punto intuire che con le parole chiave potremo posizionare uno sfondo attaccato al centro di uno dei quattro lati di un elemento, negli angoli oppure al centro.
Da evidenziare infine che per quanto riguarda le keyword, data la loro unicità, è possibile dichiararle in ordine x-y oppure y-x. Ecco alcuni esempi:
div.box{background: url(pic.png) no-repeat left top} /* in alto a sinistra */
div.box{background: url(pic.png) no-repeat center center} /* al centro */
div.box{background: url(pic.png) no-repeat center} /* al centro */
div.box{background: url(pic.png) no-repeat bottom right} /* in basso a destra */
div.box{background: url(pic.png) no-repeat right center} /* in centro a destra */
Posizionamento dello sfondo con le unità di misura
È possibile posizionare gli sfondi utilizzando le unità di misura tipiche per il dimensionamento di elementi e font: px, em, cm, in, mm per citarne alcune, anche se in realtà pixel ed em dovrebbero essere quelle da preferire.
Per capire il meccanismo del posizionamento con i pixel, c'è da tener presente che alla coppia numerica 0 0 (ovvero l'origine - in questo caso, e solo in questo, le unità di misura non sono necessarie dato che si tratta del valore zero) corrisponde uno sfondo il cui angolo in alto a sinistra dell'immagine coincide con l'angolo in alto a sinistra dell'elemento a cui è applicato. Da notare anche che questi valori sono quelli di default se la background-position non è specificato. Nella figura sottostante l'elemento (ovvero la sua area di padding) è rappresentato dalla zona bianca quadrettata:
Figura 2, background-position: 0 0
I piccoli quadratini più scuri rappresentano le possibili disposizioni di uno sfondo: sarà facile a questo punto intuire che con le parole chiave potremo posizionare uno sfondo attaccato al centro di uno dei quattro lati di un elemento, negli angoli oppure al centro.
Da evidenziare infine che per quanto riguarda le keyword, data la loro unicità, è possibile dichiararle in ordine x-y oppure y-x. Ecco alcuni esempi:
div.box{background: url(pic.png) no-repeat left top} /* in alto a sinistra */
div.box{background: url(pic.png) no-repeat center center} /* al centro */
div.box{background: url(pic.png) no-repeat center} /* al centro */
div.box{background: url(pic.png) no-repeat bottom right} /* in basso a destra */
div.box{background: url(pic.png) no-repeat right center} /* in centro a destra */
Posizionamento dello sfondo con le unità di misura
È possibile posizionare gli sfondi utilizzando le unità di misura tipiche per il dimensionamento di elementi e font: px, em, cm, in, mm per citarne alcune, anche se in realtà pixel ed em dovrebbero essere quelle da preferire.
Per capire il meccanismo del posizionamento con i pixel, c'è da tener presente che alla coppia numerica 0 0 (ovvero l'origine - in questo caso, e solo in questo, le unità di misura non sono necessarie dato che si tratta del valore zero) corrisponde uno sfondo il cui angolo in alto a sinistra dell'immagine coincide con l'angolo in alto a sinistra dell'elemento a cui è applicato. Da notare anche che questi valori sono quelli di default se la background-position non è specificato. Nella figura sottostante l'elemento (ovvero la sua area di padding) è rappresentato dalla zona bianca quadrettata:
Figura 2, background-position: 0 0
A questo punto vediamo come vengono trattati i valori diversi da zero: a valore positivo per la coordinata x corrisponde una traslazione verso destra; mentre a un valore positivo per la y corrisponde una traslazione verso il basso, sempre rispetto all'origine. La figura sottostante mostra un background position: 60px 120px, e l'immagine di sfondo sarà quindi traslata di 60px verso destra e di 120px verso il basso dall'angolo in alto a sinistra:
Figura 3, background-position: 60px 120px
Analogamente, valori negativi della x corrispondono a traslazioni dello sfondo verso sinistra, mentre valori negativi della y corrispondono a traslazioni verso l'alto. L'effetto è quindi quello di traslare l'immagine di sfondo, o una parte di essa, all'esterno dell'elemento a cui è assegnata. Nella seguente immagine viene rappresentata l'immagine di sfondo con background-position: -20px -20px, ovvero traslata di 20px verso l'alto e verso sinistra dall'origine. La parte visibile dello sfondo sarà quindi in realtà solo quella sull'angolo dell'elemento:
Figura 4, background-position: -20px -20px
Usare valori negativi per il background-position si rivela pratico in molti casi: uno di essi è ad esempio il Fast CSS Rollover che abbiamo usato in molti articoli qui sulla sezione CSS.
Prima di passare al prossimo argomento, c'è da evidenziare che un comportamento analogo al posizionamento degli sfondi in px si ottiene anche con tutte le altre unità di misura. Per quanto riguarda gli em però andrà tenuto presente che un em corrisponde alla dimensione del font-size attuale dell'elemento a cui si assegna uno sfondo: rimando all'articolo sul layout elastico per una valida introduzione a questa unità di misura.
Posizionamento dello sfondo in percentuale
Il posizionamento in percentuale si rivela piuttosto differente dal posizionamento con unità di misura. Anzitutto bisogna comprendere a cosa si riferiscono le percentuali per posizionare lo sfondo.
Si potrà pensare che tali valori si riferiscano alle dimensioni dell'elemento a cui viene attribuito lo sfondo. Verissimo, ma solo in parte. In effetti il posizionamento degli sfondi in percentuale tiene conto anche della dimensione dell'immagine di sfondo stessa. Vediamo come:
Viene ricavato un punto sull'elemento su cui viene applicato lo sfondo, tenendo come origine l'angolo in alto a sinistra e operando una traslazione pari alle due percentuali;
viene poi ricavato un punto applicando le percentuali anche sull'immagine di sfondo, anche qui avendo come origine l'angolo in alto a sinistra;
per posizionare lo sfondo, i due punti ricavati nei due step precedenti vengono infine fatti coincidere.
Questo ci assicura che in un range di valori di percentuali comprese tra 0 e 100% la nostra immagine di sfondo sia contenuta interamente nell'elemento a cui viene assegnata (salvo nel caso in cui l'immagine di sfondo sia più grande dell'elemento stesso).
Potrà sembrare poco intuitivo all'inizio, ma basti pensare che possiamo ad esempio replicare l'effetto delle keyword solo usando 0, 50% e 100% per le due coordinate della background-position. Vediamo un esempio:
div.box{
background: url(help.png) no-repeat 50% 50%
}
In questo caso la nostra immagine dato verrà perfettamente centrata nell'elemento che la contiene, dato che viene individuato il punto centrale dell'elemento e fatto coincidere con il punto centrale dell'immagine:
Figura 5, background-position: 50% 50%
[/img]http://www.html.it/articoli/2557/bk4.png[/img]
Vediamo un altro esempio: nel prossimo caso abbiamo background-position: 0 100%. Il punto che si rileva sull'elemento è l'angolo in basso a sinistra (una traslazione di 0 sull'asse orizzontale e del 100% sull'asse verticale rispetto all'origine). Anche per l'immagine il punto individuato è l'angolo in basso a sinistra. Facendoli coincidere, si avrà quindi che l'immagine viene posizionata con il suo angolo in basso a sinistra sull'analogo dell'elemento che lo contiene:
Figura 6, background-position: 0% 100%
Un'ottima applicazione pratica del posizionamento degli sfondi in percentuale si può trovare ad esempio nell'articolo sul Layout liquido a due colonne.
Per quanto riguarda il posizionamento del background in percentuale, c'è ancora da dire che sono anche ammesse percentuali negative, ma queste non si rivelano di molta utilità pratica dato che hanno l'effetto di traslare lo sfondo o parte di esso fuori dall'elemento a cui viene attribuito.
_______________________________________
 PM-URI
 
JUST SAY THANKS-it only takes a second!!!!
|
|
