Posizionare il background

Negli articoli Usare il background,
Grafica per blog con i CSS
e più in generale nella maggior parte della sezione CSS abbiamo trattato molti
esempi pratici di utilizzo degli sfondi CSS.
Ci sono tuttavia alcuni aspetti teorici che meritano un approfondimento:
in particolare la proprietà background-position che tratteremo
esaustivamente in questo articolo, mentre per la parte introduttiva e relativa
alle altre proprietà rimando alla guida CSS.

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:

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:

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:

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:

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:

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:

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:

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:

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:

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.

Esempi e conclusioni

In questo appuntamento abbiamo trattato il posizionamento del background,
che spesso è sottovalutato o poco compreso, ma è un aspetto decisamente importante
per lo sviluppo con grafica e fogli di stile. Vorrei infine ricordare che
è possibile specificare coppie di valori miste tra pixel, keyword e percentuali.

Alcuni esempi di posizionamento degli sfondi, inclusi quelli illustrati in questo articolo,
sono consultabili in questa pagina. Alla prossima.