Grazie alla proprietà background, in CSS possiamo gestire lo sfondo e aggiungerci degli effetti allo stesso. Nessuna di queste proprietà eredita i valori e possono essere applicate a qualsiasi elemento.
Indice
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background-size
- background-clip
- background-origin
- background
background-color
Il colore dello sfondo viene gestito grazie alla proprietà background-color. Se non viene applicato nessun colore, lo sfondo è trasparente.
background-color : transparent | <color>
Anche se viene impostata un'immagine di sfondo, è buona norma inserire ugualmente il colore per lo sfondo. Così facendo ci sarà sempre un segnaposto nel caso in cui l'immagine non fosse disponibile.
background-color : #ffffff;
background-image
La proprietà background-image specifica l'utilizzo di un'immagine come sfondo per l'elemento attraverso la funzione url.
background-image : none | url(<url>)
Il percorso dove viene richiamata l'immagine, è definito dalla funzione url, il quale può essere assoluto o relativo rispetto alla posizione del file CSS.
/* Percorso relativo */
background-image: url(../images/mybg.jpg);
/* Percorso assoluto */
background-image: url(https://miosito.com/immagini/gatto.jpg);
background-repeat
Di base l'immagine di sfondo viene ripetuta orizzontalmente e verticalmente, per riempire lo spazio del suo contenitore. Utilizzando la proprietà background-repeat possiamo ripetere l'immagine orizzontalmente (repeat-x), verticalmente (repeat-y) oppure non ripeterla (no-repeat).
background-repeat : repeat | repeat-x | repeat-y | no-repeat
background-attachment
Quando avviene lo scroll sulla viewport in un browser, l'immagine di sfondo segue il flusso del resto della pagina. Questo viene determinato dalla proprietà background-attachment che ha il valore iniziale impostato su scroll.
Se il valore è impostato su fixed, la posizione dello sfondo è relativa alla viewport, che lo rende fisso nella propria posizione durante lo scrolling della pagina.
background-attachment : scroll | fixed | local
CSS 3 ha introdotto un terzo valore per questa proprietà, local, che risolve lo sfondo relativo al contenuto dell'elemento anziché all'intera viewport. Con questo valore, lo sfondo scorre insieme all'elemento contenuto solo quando viene fatto scorrere anche l'elemento che lo contiene (risultato ottenuto utilizzando la proprietà overflow).
background-position
La proprietà background-position è utilizzata per posizionare l'immagine di sfondo, con un valore per la posizione verticale e un'altro per quella orizzontale.
Entrambi i valori possono essere impostati su una lunghezza o una percentuale della dimensione dell'elemento e sono ammessi anche valori negativi. Ci sono anche alcuni valori predefiniti per questa proprietà, inclusi top, center e bottom per il posizionamento verticale; e left, center e right per il posizionamento orizzontale.
background-position : <length> <length> | <percentage> <percentage> | top/center/bottom + left/center/right
Di base l'immagine di sfondo è posizionata in alto a sinistra dell'elemento che la contiene. Qualsiasi valore di lunghezza fornito sposta l'immagine di sfondo relativamente ai bordi del contenitore. Ad esempio, i seguenti offset di proprietà impostano l'immagine di sfondo 15 pixel in basso e 20 pixel a destra:
background-position: 15px 20px;
CSS 3 ha aggiunto un quarto valore, che consente di scegliere da quale parte dell'elemento verrà posizionata l'immagine. Usando questa sintassi, lo sfondo è nell'angolo in basso a destra anziché in alto a sinistra dell'elemento.
background-position: bottom 15px right 15px;
background-size
La grandezza dell'immagine di sfondo è di norma data dalla grandezza dell'immagine stessa. Questo valore può essere modificato grazie alla proprietà background-size, che permette di scalare le immagini di sfondo in una dimensione specificata in pixel o in percentuale relativa alla posizione dell'immagine.
background-size (1-2) : auto | <length> | <percentage> | cover | contain
Con due valori viene determinata la larghezza e l'altezza dell'immagine.
background-size: 120% 80%;
Nel caso in cui inserissimo un singolo valore di percentuale, esso agirebbe solo sulla larghezza dell'immagine, preservando però le proporzioni e agendo anche sull'altezza.
background-size: 250%;
Le parole chiave contain e cover, contengono e ricoprono le dimensioni dello sfondo mantenendo le proporzioni. Il valore cover assicura che l'immagine ricopra completamente l'area di posizionamento dello sfondo, mentre
contain fa si che lo sfondo sia contenuto all'interno dell'area.
background-clip
L'area di disegno di un'immagine o di un colore di sfondo può essere impostata con proprietà background-clip.
background-clip : border-box | padding-box | content-box
Lo sfondo si estende fino alla parte esterna del bordo (border-box) e viene eseguito il rendering su qualsiasi bordo visibile.
Un valore di padding-box disegna invece lo sfondo all'interno dell'elemento. Il terzo valore possibile, content-box, disegna lo sfondo all'interno del contenuto. Nell'esempio lo sfondo è posto sui margini esterni del proprio box.
background-clip: content-box;
background-origin
La proprietà background-origin determina il punto iniziale di un'immagine di sfondo o di un colore.
background-origin : padding-box | border-box | content-box
Un'immagine di sfondo viene normalmente visualizzata a partire dall'alto a sinistra dell'area di riempimento dell'elemento (padding-box). Può essere cambiato così che lo sfondo inizi dal bordo superiore sinistro dell'area del bordo (border-box) o dall'area del contenuto (content-box).
La proprietà background-origin viene spesso utilizzata insieme a background-clip per cambiare sia il punto di partenza che l'area di ritaglio dello sfondo.
background-origin: content-box;
background-clip: content-box;
background
La proprietà background è uno shortcut per impostare tutte le proprietà dello sfondo in un'unica dichiarazione.
background : <background-color> + <background-image> + <background-repeat> + <background-attachment> + <background-position> + <background-size> + <background-clip> + <background-origin>
L'ordine dei valori è irrilevante perché non c'è ambiguità tra loro. È possibile tralasciare un valore qualsiasi, ma bisogna tenere presente che tali proprietà omesse verranno ripristinate ai valori predefiniti quando si utilizza la proprietà background.
background: url(img.png) no-repeat fixed left bottom;
Nella maggior parte dei casi, è preferibile utilizzare questa proprietà solo quando si vuole impostare più di un valore utilizzando una singola proprietà.
Conclusione
In questo articolo abbiamo visto come la proprietà background, in CSS ci permette di gestire lo sfondo e aggiungerci degli effetti allo stesso.
