Sfondi CSS: colori, gradienti e immagini a livelli

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».

.hero {
  /* image | position / size | repeat | colour */
  background: url("harbour.webp") center 30% / cover no-repeat #0f172a;
}

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.

.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;
}

Usa transparent negli stop esterni perché le luci si fondano con ciò che sta sotto. Per le forme stesse, vedi gradiente radiale CSS e gradiente mesh CSS.

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.

.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;
}

Overlay a gradiente ha altre ricette di overlay, e testo sopra un’immagine 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.

.card {
  background:
    url("grain.png") 0 0 / 200px 200px repeat,
    linear-gradient(135deg, #7c2d12 0%, #ea580c 55%, #fdba74 100%);
}

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 per lo schema completo.

Errori da evitare

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.

<link rel="preload" as="image" href="/hero-1920.avif" type="image/avif" fetchpriority="high">

<style>
  .hero {
    background: image-set(
      url("/hero-1920.avif") type("image/avif"),
      url("/hero-1920.webp") type("image/webp"),
      url("/hero-1920.jpg") type("image/jpeg")
    ) center / cover no-repeat #0f172a;
  }
</style>

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 e WebP contro PNG e JPG 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.