CSS  »  Articoli  »  Mondo CSS 

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:

Figura 1, Le keyword per il background.

Altri articoli

Altre guide

Altre newsletter