Sfondi

Dietro ogni casella CSS c'è un livello specializzato chiamato strato di sfondo. I CSS offrono vari modi per apportare modifiche significative, ad esempio consentendo l'utilizzo di più sfondi.

I livelli di sfondo, più lontani dall'utente, sono visualizzati dietro i contenuti di un riquadro a partire dall'area padding-box. In questo modo il livello di sfondo non si sovrapponga affatto ai bordi.

Colore sfondo

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Origine

Uno degli effetti più semplici che puoi applicare a un livello di sfondo è impostare il colore. Il valore iniziale di background-color è transparent e consente di rendere visibili i contenuti di un elemento principale. Un set di colori valido su un livello di sfondo si trova dietro altri elementi dipinti su quell'elemento.

Immagini di sfondo

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Origine

Sopra il livello background-color, puoi aggiungere un'immagine di sfondo utilizzando la proprietà background-image. Un background-image accetta quanto segue:

  • Un URL immagine o un URI di dati che utilizza la funzione CSS url.
  • Un'immagine creata in modo dinamico da una funzione CSS gradiente.

Impostazione di un'immagine di sfondo con la funzione CSS url

Sfondi gradienti CSS

Esistono diverse funzioni CSS relative al gradiente che consentono di generare un'immagine di sfondo quando vengono trasmessi due o più colori.

Indipendentemente dalla funzione gradiente utilizzata, l'immagine risultante ha dimensioni intrinseche che corrispondano alla quantità di spazio disponibile.

Demo che mostra un esempio di applicazione di un'immagine di sfondo utilizzando le funzioni a gradiente:

Immagini di sfondo ripetute

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Origine

Per impostazione predefinita, le immagini di sfondo si ripetono orizzontalmente e verticalmente per riempire l'intero spazio del livello di sfondo.

Per modificare questa impostazione, utilizza la proprietà background-repeat con uno dei seguenti valori:

  • repeat: l'immagine si ripete nello spazio disponibile e viene ritagliata se necessario.
  • round: l'immagine si ripete orizzontalmente e verticalmente per adattarsi al maggior numero di istanze nello spazio disponibile. Quando lo spazio disponibile aumenta, l'immagine si estende e, dopo averla allungata per metà della larghezza originale, si comprime per aggiungere altre istanze dell'immagine.
  • space: l'immagine si ripete orizzontalmente e verticalmente per adattarsi al maggior numero di istanze all'interno dello spazio disponibile senza ritagliarle, distribuendo le istanze dell'immagine in base alle esigenze. Le immagini ripetute toccano i bordi dello spazio occupato da un livello di sfondo, con uno spazio bianco distribuito uniformemente tra di loro.

La proprietà background-repeat consente di impostare il comportamento degli assi x e y in modo indipendente. Il primo parametro imposta il comportamento di ripetizione orizzontale e il secondo quello verticale.

Se utilizzi un singolo valore, questo verrà applicato alle ripetizioni orizzontali e verticali.

La forma abbreviata include anche opzioni pratiche di una sola parola per rendere più chiaro l'intento.

Il valore repeat-x ripete un'immagine solo orizzontalmente, questo equivale a repeat no-repeat.

La demo seguente mostra queste funzionalità della proprietà background-repeat:

Posizione sfondo

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Origine

Potresti aver notato che alcune immagini sul web presentano uno stile con una dichiarazione background-repeat: no-repeat e vengono visualizzate in alto a sinistra del relativo contenitore.

La posizione iniziale delle immagini di sfondo è in alto a sinistra. La proprietà background-position ti consente di modificare questo comportamento compensando la posizione dell'immagine.

Come nel caso di background-repeat, la proprietà background-position consente di posizionare le immagini lungo gli assi X e Y in modo indipendente con due valori per impostazione predefinita.

Quando vengono utilizzate lunghezze e percentuali CSS, il primo parametro corrisponde all'asse orizzontale, mentre il secondo all'asse verticale.

Quando vengono utilizzate solo le parole chiave, l'ordine delle parole chiave non è importante:

Cosa fare
background-position: left 50%;
Cosa fare
background-position: top left;
Cosa fare
background-position: left top;

L'ordine non è importante per le parole chiave associate a diversi assi di posizione.

Cosa non fare
  background-position: 50% left;

Quando i valori CSS vengono utilizzati insieme alle parole chiave, l'ordine è importante. Il primo valore rappresenta l'asse orizzontale e il secondo l'asse verticale.

Cosa non fare
  background-position: left right;

Non puoi utilizzare contemporaneamente parole chiave associate allo stesso asse.

La proprietà background-position offre anche un pratico valore abbreviato. il valore omesso si risolve in 50%. Ecco un esempio che dimostra l'utilizzo delle parole chiave accettate dalla proprietà background-position:

Oltre al formato predefinito di due parametri e un modulo di un parametro, la proprietà background-position accetta anche fino a quattro parametri;

Quando si utilizzano tre o quattro parametri, la lunghezza o la percentuale CSS deve essere preceduta dalle parole chiave top, left, right o bottom affinché il browser possa calcolare da quale bordo del riquadro CSS deve avere origine l'offset.

Quando vengono utilizzati tre parametri, una lunghezza o un valore CSS può essere il secondo o il terzo parametro, mentre gli altri due sono parole chiave. la parola chiave che ha successo sarà utilizzata per determinare il bordo di cui la lunghezza o il valore CSS corrisponde all'offset. L'offset dell'altra parola chiave specificata è impostato su 0.

Cosa fare
background-position: bottom 88% right;
Cosa fare
background-position: right bottom 88%;
Cosa non fare
background-position: 88% bottom right;
Il valore della lunghezza CSS deve essere preceduto dalle parole chiave top, right, bottom o left quando si utilizzano tre o più parametri.
Cosa fare
background-position: bottom 88% right 33%;
Cosa fare
background-position: right 33% bottom 88%;
Cosa non fare
background-position: 88% 33% bottom left;
Il valore della lunghezza CSS deve essere preceduto dalle parole chiave top, right, bottom o left quando si utilizzano tre o più parametri.

Se background-position: top left 20% viene applicato a un'immagine di sfondo CSS, l'immagine è posizionata nella parte superiore della casella, il valore 20% rappresenta un offset del 20% dal lato sinistro del riquadro (sull'asse x).

Se background-position: top 20% left viene applicato a un'immagine di sfondo CSS, il valore del 20% rappresenta un offset del 20% dalla parte superiore della casella CSS (sull'asse Y) e l'immagine è posizionata a sinistra della casella.

Quando si utilizzano quattro parametri, le due parole chiave vengono associate a due valori corrispondenti a un offset rispetto alle origini di ciascuna parola chiave specificata. Se background-position: bottom 20% right 30% viene applicato a un'immagine di sfondo, quest'ultima viene posizionata al 20% dal basso e al 30% dal lato destro della casella CSS.

La demo seguente dimostra questo comportamento:

Di seguito sono riportati altri esempi di utilizzo della proprietà background-position con una combinazione di valori CSS e delle parole chiave:

Dimensione sfondo

Supporto dei browser

  • Chrome: 3.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Origine

La proprietà background-size imposta le dimensioni delle immagini di sfondo; Per impostazione predefinita, le dimensioni delle immagini di sfondo vengono stabilite in base a larghezza, altezza e proporzioni intrinseche (effettive).

La proprietà background-size utilizza valori percentuali e lunghezza CSS o parole chiave specifiche. La proprietà accetta fino a due parametri corrispondenti che consentono di modificare la larghezza e l'altezza di uno sfondo in modo indipendente.

La proprietà background-size accetta le seguenti parole chiave:

  • auto: se utilizzata in modo indipendente, l'immagine di sfondo viene ridimensionata in base alla larghezza e all'altezza intrinseche. Quando auto viene utilizzato insieme a un altro valore CSS per la larghezza (primo parametro) o l'altezza (secondo parametro), la dimensione impostata su auto viene ridimensionata in base alle esigenze per mantenere le proporzioni naturali dell'immagine. Questo è il comportamento predefinito della proprietà background-size.
  • cover: copre l'intera area del livello di sfondo. Ciò potrebbe significare che l'immagine è allungata o ritagliata.
  • contain: ridimensiona l'immagine in modo che riempia lo spazio senza estenderla o ritagliarla. Di conseguenza, potrebbe rimanere uno spazio vuoto che farà sì che l'immagine si ripeta, a meno che background-repeat non sia impostato su no-repeat.

Gli ultimi 2 sono destinati a essere utilizzati in modo indipendente senza un altro parametro.

La seguente demo illustra la pratica delle parole chiave:

Demo che mostra l'applicazione di queste parole chiave a background-size:

Allegato in background

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Origine

La proprietà background-attachment ti consente di modificare il comportamento della posizione fissa delle immagini di sfondo (immagini che fanno parte di un livello di sfondo) una volta che il livello è visibile su uno schermo.

Accetta tre parole chiave: scroll, fixed e local.

Il comportamento predefinito della proprietà background-attachment è il valore iniziale di scroll. Quando è necessario più spazio, le immagini si spostano all'interno del livello di sfondo in base ai limiti del riquadro CSS.

Il valore fixed fissa la posizione delle immagini di sfondo nell'area visibile.

Una volta che lo spazio del livello di sfondo occupa inizialmente lo scorrimento (o il rendering) fuori schermo, le immagini all'interno del livello di sfondo rimangono nella posizione originale in cui il livello di sfondo ha consentito loro di rimanere finché l'intero livello non viene fatto scorrere fuori dallo schermo dall'area visibile.

La parola chiave local consente di fissare la posizione delle immagini di sfondo rispetto ai contenuti dell'elemento. Le immagini di sfondo ora si muovono lungo lo spazio in cui occupano uno spazio che viene visualizzato all'interno e all'esterno del riquadro CSS (solitamente a causa dello scorrimento, delle trasformazioni 2D o 3D).

Origine in background

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 3.

Origine

La proprietà background-origin ti consente di modificare l'area degli sfondi associati a una determinata casella. I valori accettati dalla proprietà corrispondono alle regioni border-box, padding-box e content-box di un riquadro .

Prova queste opzioni utilizzando la seguente demo:

Clip di sfondo

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Origine

La proprietà background-clip controlla ciò che viene visualizzato visivamente da un livello di sfondo, indipendentemente dai limiti creati dalla proprietà background-origin.

Come background-origin, le regioni che possono essere specificate sono border-box, padding-box e content-box, corrispondenti a dove può essere visualizzato un livello di sfondo CSS. Quando vengono utilizzate queste parole chiave, l'eventuale rendering dello sfondo oltre l'area specificata verrà ritagliato o tagliato.

La proprietà background-clip accetta anche una parola chiave text che ritaglia lo sfondo in modo che non sia più lontano del testo all'interno della casella dei contenuti. Affinché questo effetto sia evidente nel testo effettivo all'interno di una casella CSS, il testo deve essere parzialmente o completamente trasparente.

Si tratta di una proprietà relativamente nuova. Al momento della stesura del presente documento, Chrome e la maggior parte dei browser richiedono il prefisso -webkit- per poter utilizzare questa proprietà.

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Origine

di Gemini Advanced.

Sfondi multipli

Come menzionato all'inizio del modulo, il livello di sfondo consente di definire più sottolivelli. Per brevità, farò riferimento a questi sottolivelli come sfondi.

Vengono definiti più sfondi dall'alto verso il basso. Il primo è il più vicino all'utente, mentre l'ultimo è il più lontano.

L'unico sfondo definito o l'ultimo livello viene designato come livello di sfondo finale dal browser. Solo questo livello può assegnare un background-color.

È possibile configurare singolarmente più livelli utilizzando la maggior parte delle proprietà CSS relative allo sfondo, separate da virgole, come mostrato nello snippet di codice e nella demo dal vivo di seguito.

background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%, 0% 0%;
  background-origin: padding-box, border-box, content-box;

La forma breve sullo sfondo

Per semplificare lo stile del livello di sfondo di un riquadro, in particolare quando sono richiesti più livelli di sfondo, puoi utilizzare una scorciatoia che segue il seguente schema specifico:

background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

L'ordine è importante nella forma abbreviata di dichiarare più background. I valori di posizione e dimensione devono essere entrambi indicati, separati da una barra (/). Dichiarare l'origine e il comportamento del clip nell'ordine corretto ti consente di impostare parole chiave che siano valide contemporaneamente per entrambi

La seguente dichiarazione ritaglia lo sfondo e lo ricava dalla casella dei contenuti:

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

Tenendo presente questa semantica breve, le precedenti dichiarazioni relative allo sfondo dello snippet di codice potrebbero essere riscritte in modo da essere:

background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;

Verifica le tue conoscenze

Verifica le tue conoscenze degli sfondi CSS

Le immagini di sfondo sono posizionate in alto a sinistra di una casella CSS.

Falso
Vero

Le immagini di sfondo non vengono ripetute per impostazione predefinita.

Falso
Vero

Quali delle seguenti dichiarazioni di background-position sono valide?

background-position: top right 33%
background-position: right bottom
background-position: left
background-position: 50% left

Per impostare un'immagine di sfondo in modo che venga fissata all'interno di un'area visibile utilizza:

background-fixed-to-viewport: true
background-position: fixed
background-attachment: fixed
background-attachment: scroll

L'origine predefinita di uno sfondo all'interno di una casella CSS è:

border-box
content-box
margin-box
padding-box