Sfondi

Dietro ogni riquadro CSS è presente uno strato specializzato chiamato livello di sfondo. Il CSS offre diversi modi per apportare modifiche significative, tra cui la possibilità di avere più sfondi.

I livelli di sfondo sono più lontani dall'utente e vengono visualizzati dietro i contenuti di una casella a partire dalla relativa regione padding-box. In questo modo, il livello di sfondo non si sovrappone ai bordi.

Colore sfondo

Browser Support

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

Source

Uno degli effetti più semplici che puoi applicare a un livello di sfondo è l'impostazione del colore. Il valore iniziale di background-color è transparent, che consente la visualizzazione dei contenuti di un elemento principale. Un colore valido impostato su un livello di sfondo si trova dietro gli altri elementi dipinti su quell'elemento.

Immagini di sfondo

Browser Support

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

Source

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 dati utilizzando la funzione CSS url.
  • Un'immagine creata dinamicamente da una funzione CSS di sfumatura.

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

Sfondi CSS con gradiente

Esistono diverse funzioni CSS gradient che ti consentono di generare un'immagine di sfondo quando vengono passati due o più colori.

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

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

Immagini di sfondo ripetitive

Browser Support

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

Source

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

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

  • repeat: l'immagine viene ripetuta nello spazio disponibile, ritagliata se necessario.
  • round: l'immagine viene ripetuta orizzontalmente e verticalmente per adattarsi al maggior numero di istanze nello spazio disponibile. Man mano che lo spazio disponibile aumenta, l'immagine si allunga e, dopo aver allungato metà della larghezza originale dell'immagine, si comprime per aggiungere altre istanze dell'immagine.
  • space: l'immagine viene ripetuta orizzontalmente e verticalmente per adattarsi al maggior numero di istanze nello spazio disponibile senza ritagliarla, distanziando le istanze dell'immagine in base alle esigenze. Le immagini ripetute toccano i bordi dello spazio occupato da un livello di sfondo, con spazi bianchi distribuiti uniformemente tra di loro.

La proprietà background-repeat consente di impostare il comportamento per l'asse x e l'asse y in modo indipendente. Il primo parametro imposta il comportamento di ripetizione orizzontale e il secondo parametro imposta il comportamento di ripetizione verticale.

Se utilizzi un singolo valore, questo verrà applicato sia alle ripetizioni orizzontali che a quelle verticali.

La stenografia offre anche comode opzioni di una sola parola per chiarire le tue intenzioni.

Il valore repeat-x ripete un'immagine solo orizzontalmente ed è equivalente a repeat no-repeat.

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

Posizione di sfondo

Browser Support

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

Source

Probabilmente avrai notato che alcune immagini sul web sono stilizzate 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 spostando la posizione dell'immagine.

Come per 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 le parole chiave vengono utilizzate solo, l'ordine 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 ha anche una comoda abbreviazione con un solo valore; il valore omesso viene risolto in 50%. Ecco un esempio che lo dimostra utilizzando le parole chiave accettate dalla proprietà background-position:

Oltre alla forma predefinita con due parametri e a quella con un parametro, la proprietà background-position accetta anche fino a quattro parametri.

Quando vengono utilizzati tre o quattro parametri, una lunghezza o una percentuale CSS deve essere preceduta dalle parole chiave top, left, right o bottom affinché il browser calcoli da quale bordo della casella CSS debba provenire 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 segue verrà utilizzata per determinare il bordo a cui corrisponde la lunghezza o il valore CSS come 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 vengono utilizzati 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 vengono utilizzati tre o più parametri.

Se background-position: top left 20%viene applicato a un'immagine di sfondo CSS, l'immagine viene posizionata nella parte superiore della casella. Il valore 20% rappresenta un offset del 20% rispetto alla parte sinistra della casella (sull'asse x).

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

Quando vengono utilizzati 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 a 20% dal basso e a 30% dalla destra della casella CSS.

La seguente demo mostra questo comportamento:

Ecco altri esempi di utilizzo della proprietà background-position con una combinazione di valori CSS e parole chiave:

Dimensioni sfondo

Browser Support

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

Source

La proprietà background-size imposta le dimensioni delle immagini di sfondo. Per impostazione predefinita, le dimensioni delle immagini di sfondo si basano su larghezza, altezza e proporzioni intrinseche (effettive).

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

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. Se 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 è scalata o ritagliata.
  • contain: ridimensiona l'immagine in modo da riempire lo spazio senza estenderla o ritagliarla. Di conseguenza, può rimanere uno spazio vuoto che causerà la ripetizione dell'immagine, a meno che background-repeat non sia impostato su no-repeat.

Questi ultimi due sono pensati per essere utilizzati in modo autonomo senza un altro parametro.

La seguente demo mostra queste parole chiave in azione:

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

Allegato di sfondo

Browser Support

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

Source

La proprietà background-attachment ti consente di modificare il comportamento della posizione fissa delle immagini di sfondo (parti di un livello di sfondo) quando 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 della casella CSS.

L'utilizzo del valore fixed fissa la posizione delle immagini di sfondo all'area visibile.

Una volta che lo spazio occupato dalle immagini del livello di sfondo deve essere srotolato (o visualizzato) fuori dallo schermo, le immagini all'interno del livello di sfondo rimangono fisse nella posizione originale consentita dal livello di sfondo finché l'intero livello non viene srotolato fuori dallo schermo dal viewport.

La parola chiave local consente di fissare la posizione delle immagini di sfondo rispetto ai contenuti dell'elemento. Le immagini di sfondo ora si spostano nello spazio che occupano man mano che questo viene visualizzato all'interno e all'esterno dei limiti della casella CSS (di solito a causa di scorrimento, trasformazioni 2D o 3D).

Origine sfondo

Browser Support

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

Source

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 una casella .

Prova queste opzioni utilizzando la seguente demo:

Clip di sfondo

Browser Support

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

Source

La proprietà background-clip controlla ciò che è visibile 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, che corrispondono a dove può essere visualizzato un livello di sfondo CSS. Quando vengono utilizzate queste parole chiave, qualsiasi rendering dello sfondo oltre la regione specificata verrà ritagliato o tagliato.

La proprietà background-clip accetta anche una parola chiave text che taglia 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.

Una proprietà relativamente nuova, al momento della stesura di questo articolo, Chrome e la maggior parte dei browser richiedono il prefisso -webkit- per utilizzarla.

Browser Support

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

Source

Più sfondi

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

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

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

È possibile configurare più livelli singolarmente utilizzando la maggior parte delle proprietà CSS relative allo sfondo separate da virgola, come dimostrato 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 scorciatoia per lo sfondo

Per semplificare la definizione dello stile del livello di sfondo di una casella, in particolare quando sono necessari più livelli di sfondo, esiste una scorciatoia che segue il seguente pattern specifico:

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

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

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

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

Tenendo presente questa semantica abbreviata, le precedenti dichiarazioni relative allo sfondo dello snippet di codice potrebbero essere riscritte nel seguente modo:

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 ;

Verificare di aver compreso

Verifica le tue conoscenze sugli sfondi CSS

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

Falso
Vero

Le immagini di sfondo vengono ripetute per impostazione predefinita.

Falso
Vero

Quali delle seguenti dichiarazioni background-position sono valide?

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

Per impostare un'immagine di sfondo fissa all'interno di un viewport, utilizza:

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

Il valore predefinito di background-origin di uno sfondo all'interno di una casella CSS è:

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