# Sfondi CSS: colori, gradienti e immagini a livelli
[Canonical HTML page](https://gradiently.design/it/guide/css-background-image)
Una sola proprietà può contenere una foto, una tinta sopra, una luce morbida nell’angolo e un colore di riserva sotto. Una volta capito l’ordine dei livelli, la maggior parte degli effetti di sfondo richiede una riga.
## The short version
- La proprietà CSS background può contenere più livelli separati da virgole, e il primo livello elencato viene dipinto sopra.
- Un colore di sfondo si può impostare una sola volta, nell’ultimo livello, e compare sotto ogni immagine e gradiente.
- Nella forma abbreviata background, background-size deve seguire background-position con una barra, come in center / cover.
- Mettere un livello di gradiente sopra un livello di immagine in una sola dichiarazione è il modo più semplice di tingere una foto perché il testo sia leggibile.
- Le immagini impostate in CSS vengono scoperte più tardi degli elementi img, quindi un’immagine hero importante può richiedere un suggerimento di precaricamento.
Uno **sfondo CSS** è una pila di livelli su un solo elemento. La proprietà `background` accetta un elenco separato da virgole di immagini e gradienti, dipinti con il primo in cima, più un solo colore in fondo. È tutto ciò che serve per una foto hero tinta, una luce morbida su un gradiente o una texture sopra un colore del brand, senza elementi in più o contenitori. Il resto è sapere come la forma abbreviata legge i suoi valori.
## La forma abbreviata background, valore per valore
La forma abbreviata imposta fino a otto proprietà estese insieme. Quelle che ometti vengono riportate ai valori predefiniti, ed è la fonte più comune dei bug «perché è sparita la dimensione del mio sfondo».
| Proprietà estesa | Cosa controlla | Valori comuni |
| --- | --- | --- |
| `background-color` | Il colore sotto ogni livello | `#0f0b1e`, `oklch(20% 0.05 290)` |
| `background-image` | Immagini e gradienti, separati da virgole | `url(photo.webp)`, `linear-gradient(…)` |
| `background-position` | Dove sta ogni livello | `center`, `top right`, `50% 30%` |
| `background-size` | Quanto è grande ogni livello | `cover`, `contain`, `200px auto` |
| `background-repeat` | Se si ripete a mosaico | `no-repeat`, `repeat`, `repeat-x` |
| `background-attachment` | Scorre con l’elemento o con la finestra | `scroll`, `fixed`, `local` |
| `background-origin` e `background-clip` | Da quale riquadro parte e a quale viene tagliato | `padding-box`, `border-box`, `text` |
Riferimento completo nella [pagina background di MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background).
```css
.hero {
/* image | position / size | repeat | colour */
background: url("harbour.webp") center 30% / cover no-repeat #0f172a;
}
```
La barra è obbligatoria: la dimensione può comparire solo subito dopo la posizione. Il colore viene per ultimo e si vede mentre l’immagine carica.
## Come si impilano i livelli di sfondo
Elenca i livelli dall’alto al basso, separati da virgole. Ogni livello può avere la sua posizione, dimensione e ripetizione, date nello stesso ordine in ogni proprietà estesa. Solo l’ultimo livello può includere un colore. Pensalo come guardare attraverso una pila di carta da lucido.
- Livello 1: luce rosa: `radial-gradient(circle at 80% 20%, #f472b6 0%, transparent 45%)`
- Livello 2: luce azzurra: `radial-gradient(circle at 15% 85%, #38bdf8 0%, transparent 50%)`
- Livello 3: fondo indaco: `linear-gradient(160deg, #1e1b4b 0%, #0f0b1e 100%)`
Tre livelli mostrati da soli. I primi due sfumano verso il trasparente, quindi il fondo si vede dove non dipingono.
```css
.section {
background:
radial-gradient(circle at 80% 20%, #f472b6 0%, transparent 45%),
radial-gradient(circle at 15% 85%, #38bdf8 0%, transparent 50%),
linear-gradient(160deg, #1e1b4b 0%, #0f0b1e 100%)
#0f0b1e;
}
```
Gli stessi tre livelli impilati in una sola dichiarazione, il primo in cima, con un colore pieno di riserva in fondo.
Usa `transparent` negli stop esterni perché le luci si fondano con ciò che sta sotto. Per le forme stesse, vedi [gradiente radiale CSS](https://gradiently.design/it/guide/css-radial-gradient) e [gradiente mesh CSS](https://gradiently.design/it/guide/css-mesh-gradient).
## Un gradiente sopra un’immagine di sfondo
Lo sfondo a livelli più utile tinge una foto perché le parole sopra siano leggibili. Metti prima un livello di gradiente e l’immagine per seconda. Un gradiente scuro dove sta il testo e trasparente altrove conserva molta più foto di un overlay scuro uniforme.
```css
.hero {
background:
linear-gradient(90deg, rgb(10 12 24 / 0.85) 0%, rgb(10 12 24 / 0.4) 45%, transparent 70%),
url("terrace.webp") center / cover no-repeat
#0a0c18;
color: #f8fafc;
}
```
Scuro a sinistra dove sta il titolo, trasparente a destra dove la foto deve vedersi.
Un hero largo di un sito con un titolo su uno sfondo scurito in modo uniforme
Un overlay uniforme rende leggibile il testo oscurando tutto allo stesso modo.
Lo stesso hero in cui solo il lato dietro il titolo è più calmo e scuro
Un livello direzionale scurisce solo dove sono le parole e lascia luminosa il resto della scena.
[Overlay a gradiente](https://gradiently.design/it/guide/gradient-overlay) ha altre ricette di overlay, e [testo sopra un’immagine](https://gradiently.design/it/guide/text-over-image) spiega quando spostare le parole invece di scurire l’immagine.
## background-size, position e repeat
- `cover` riempie il riquadro e taglia ciò che sborda. Giusto per foto e hero a tutta larghezza.
- `contain` fa stare l’intera immagine dentro e lascia spazi. Giusto per loghi e illustrazioni che non devono essere tagliati.
- Abbina `cover` a un `background-position` voluto come `50% 30%`, così il ritaglio tiene in vista il volto del soggetto o il prodotto.
- I mosaici di texture vogliono `repeat` e una dimensione fissa, per esempio `200px 200px`, così la grana resta uguale a ogni larghezza di schermo.
- `background-attachment: fixed` crea un effetto parallasse sul desktop, ma molti browser mobili lo ignorano, quindi non dipenderne mai.
```css
.card {
background:
url("grain.png") 0 0 / 200px 200px repeat,
linear-gradient(135deg, #7c2d12 0%, #ea580c 55%, #fdba74 100%);
}
```
Un piccolo mosaico di grana ripetuto sopra un gradiente caldo. Le impostazioni per livello seguono ogni immagine, quindi il gradiente non è toccato dalla dimensione del mosaico.
Un’altra proprietà estesa si guadagna il posto: `background-clip: text` taglia lo sfondo sulla forma delle lettere, ed è così che si fanno le scritte a gradiente in CSS. Tienila per parole display grandi, imposta un `color` pieno di riserva e vedi [testo con gradiente CSS](https://gradiently.design/it/guide/css-gradient-text) per lo schema completo.
## Errori da evitare
### Evita
- Impostare `background-size` e poi la forma abbreviata dopo, che lo azzera
- Un colore in un livello qualsiasi tranne l’ultimo
- Nessun colore di riserva, quindi il testo è illeggibile mentre l’immagine carica
- Una foto enorme per un riquadro largo 400 pixel
- Contenuto importante solo in un’immagine di sfondo, invisibile ai lettori di schermo
### Fai
- Scrivi prima la forma abbreviata, poi le eventuali proprietà estese che la sovrascrivono
- Un solo colore, in fondo all’elenco
- Un colore di riserva vicino al tono medio dell’immagine
- Immagini dimensionate sul riquadro, servite come WebP o AVIF
- Immagini significative come `img` con testo alternativo; la decorazione come sfondi
## Immagini di sfondo responsive e veloci
`image-set()` permette al browser di scegliere tra formati o risoluzioni, un po’ come `srcset` su un `img`. E poiché le immagini di sfondo vengono scoperte solo quando il CSS è analizzato, uno sfondo hero può arrivare in ritardo; un suggerimento di precaricamento nell’`head` lo risolve.
```html
```
Il browser prende il primo formato che supporta. Il precaricamento fa sì che l’immagine principale inizi a scaricarsi presto.
Spesso lo sfondo più veloce non è un’immagine. I gradienti a livelli non costano alcun download, e un minuscolo mosaico di grana aggiunge texture per pochi kilobyte. [Prestazioni dei gradienti CSS](https://gradiently.design/it/guide/css-gradient-performance) e [WebP contro PNG e JPG](https://gradiently.design/it/guide/webp-images) trattano i compromessi. Se preferisci non rifinire a mano luce e grana, un Mark di Gradiently ti dà uno sfondo finito e distintivo alla misura hero di sito 1920×1080, con lo stesso aspetto dei tuoi post social.
## FAQ
### Come aggiungo un’immagine di sfondo in CSS?
Usa `background: url("image.webp") center / cover no-repeat;` sull’elemento, con un colore di riserva alla fine nel caso l’immagine carichi lentamente.
### Come metto un gradiente sopra un’immagine di sfondo?
Elenca prima il gradiente e per seconda l’immagine in una sola dichiarazione `background`, separati da una virgola. Il primo livello viene dipinto sopra.
### Posso usare più sfondi in CSS?
Sì. Separa i livelli con virgole; ognuno può avere la sua posizione, dimensione e ripetizione, e solo l’ultimo livello può includere un colore.
### Che differenza c’è tra background-size cover e contain?
`cover` riempie tutto l’elemento e taglia ciò che sborda; `contain` mostra l’intera immagine e può lasciare spazio vuoto attorno.
### Perché background-size smette di funzionare?
La forma abbreviata `background` azzera ogni proprietà estesa che non nomina. Imposta `background-size` dopo la forma abbreviata, oppure includilo nella forma abbreviata dopo la posizione con una barra.