CSS Fogli Di Stile

Proprietà Per Lo Sfondo

Stampa WhatsApp Email

Le proprietà CSS per gli sfondi: colori, immagini, ripetizione, posizione, dimensioni e gradienti, con esempi e risultati visivi.

Prerequisiti: sintassi CSS e selettori di classe; nozioni di contenuto, padding e bordo.

Le proprietà CSS per lo sfondo

Lo sfondo viene disegnato dietro al contenuto di un elemento. Può essere un colore uniforme, un’immagine, un gradiente oppure una combinazione di questi elementi. Non cambia il testo e non determina da solo le dimensioni del riquadro.

Come leggere gli esempi

La classe riquadro permette di selezionare il div con .riquadro. Ogni esempio mostra il codice HTML, una regola CSS completa e il risultato isolato dagli stili del sito. I riquadri misurano 260 × 160 pixel per rendere confrontabili gli effetti.

Gli esempi con immagini utilizzano un piccolo paesaggio chiamato sfondo.svg, di 160 × 100 pixel. Per riprodurli nei tuoi file, salva l’immagine nella stessa cartella del documento HTML se usi uno stile interno, oppure nella stessa cartella del file CSS se usi uno stile esterno. Le anteprime della lezione incorporano l’immagine e funzionano anche senza il file aggiuntivo.

Il percorso dell’immagine: in un foglio CSS esterno, url("sfondo.svg") è relativo alla posizione del foglio CSS. Per una sottocartella puoi scrivere, per esempio, url("immagini/sfondo.svg").

1. Colore e immagine di sfondo

Un elemento può avere un colore di sfondo, una o più immagini oppure entrambi. Il colore viene disegnato sotto le immagini.

1. Colore e immagine di sfondo: esempi e risultati
Proprietà o valoreDescrizioneEsempio HTML e CSSRisultato
background-color Imposta il colore di sfondo. Il valore iniziale è transparent: il colore dello sfondo sottostante rimane visibile. HTML
<div class="riquadro"></div>
CSS
.riquadro {
    width: 260px;
    height: 160px;
    box-sizing: border-box;
    background-color: #dceeff;
}

Lo sfondo è azzurro. Il colore del testo non cambia: per quello si usa color.
background-image Imposta un’immagine di sfondo tramite url(), oppure un gradiente. Il valore none rimuove le immagini di sfondo. HTML
<div class="riquadro"></div>
CSS
.riquadro {
    width: 260px;
    height: 160px;
    box-sizing: border-box;
    background-image: url("sfondo.svg");
}

Il disegno è ripetuto per riempire il riquadro, perché la ripetizione predefinita è repeat. L’immagine originale misura 160 × 100 pixel.

2. Ripetizione e posizione

Un’immagine piccola può comparire più volte nello stesso riquadro. Possiamo controllare la ripetizione e scegliere dove collocarla.

2. Ripetizione e posizione: esempi e risultati
Proprietà o valoreDescrizioneEsempio HTML e CSSRisultato
background-repeat Controlla la ripetizione. repeat ripete su entrambi gli assi; no-repeat mostra una sola copia; repeat-x e repeat-y ripetono lungo un solo asse. HTML
<div class="riquadro"></div>
CSS
.riquadro {
    width: 260px;
    height: 160px;
    box-sizing: border-box;
    background-image: url("sfondo.svg");
    background-repeat: no-repeat;
}

Compare una sola immagine, nell’angolo superiore sinistro. Le zone restanti mostrano lo sfondo sottostante.
background-repeat: repeat-x È un valore di background-repeat: ripete l’immagine soltanto in orizzontale. HTML
<div class="riquadro"></div>
CSS
.riquadro {
    width: 260px;
    height: 160px;
    box-sizing: border-box;
    background-image: url("sfondo.svg");
    background-repeat: repeat-x;
}

Le copie dell’immagine formano una fascia orizzontale.
background-position Imposta la posizione dell’immagine. Accetta parole chiave, misure e percentuali. Con due valori, il primo riguarda l’orizzontale e il secondo la verticale. HTML
<div class="riquadro"></div>
CSS
.riquadro {
    width: 260px;
    height: 160px;
    box-sizing: border-box;
    background-image: url("sfondo.svg");
    background-repeat: no-repeat;
    background-position: center center;
}

Una sola immagine è centrata orizzontalmente e verticalmente. Altri esempi: left top, right bottom e 20px 10px.

3. Dimensione dell’immagine

background-size controlla quanto è grande l’immagine di sfondo. Non imposta la dimensione dell’elemento che la contiene.

3. Dimensione dell’immagine: esempi e risultati
Proprietà o valoreDescrizioneEsempio HTML e CSSRisultato
background-size: misure Con due misure imposta larghezza e altezza dell’immagine. Con una misura e auto conserva le proporzioni originali. HTML
<div class="riquadro"></div>
CSS
.riquadro {
    width: 260px;
    height: 160px;
    box-sizing: border-box;
    background-image: url("sfondo.svg");
    background-repeat: no-repeat;
    background-size: 80px auto;
}

L’immagine è larga 80 pixel e alta 50 pixel, perché mantiene le proporzioni originali di 160 × 100.
background-size: cover Ingrandisce o riduce l’immagine mantenendo le proporzioni fino a coprire tutta l’area. Una parte dell’immagine può essere tagliata. HTML
<div class="riquadro"></div>
CSS
.riquadro {
    width: 260px;
    height: 160px;
    box-sizing: border-box;
    background-image: url("sfondo.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

Il riquadro è interamente coperto. Se le proporzioni sono diverse, alcuni bordi dell’immagine non sono visibili.
background-size: contain Ridimensiona l’immagine mantenendo le proporzioni affinché sia interamente visibile nell’area. Può lasciare zone libere. HTML
<div class="riquadro"></div>
CSS
.riquadro {
    width: 260px;
    height: 160px;
    box-sizing: border-box;
    background-color: #fff4d6;
    background-image: url("sfondo.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

L’intera immagine è visibile. Le zone eventualmente libere sono giallo chiaro grazie a background-color.

4. Area dello sfondo

Per comprendere queste proprietà osserva contenuto, padding e bordo. Nell’anteprima il bordo tratteggiato lascia vedere lo sfondo presente sotto di esso.

4. Area dello sfondo: esempi e risultati
Proprietà o valoreDescrizioneEsempio HTML e CSSRisultato
background-origin Definisce l’area di riferimento per posizione e dimensione delle immagini. Il valore iniziale è padding-box; content-box usa l’area del contenuto e border-box include il bordo. Non controlla il colore di sfondo. HTML
<div class="riquadro"></div>
CSS
.riquadro {
    width: 260px;
    height: 160px;
    box-sizing: border-box;
    padding: 25px;
    border: 8px dashed #555555;
    background-image: url("sfondo.svg");
    background-repeat: no-repeat;
    background-origin: content-box;
}

L’immagine parte dall’angolo superiore sinistro del contenuto, dopo il bordo e i 25 pixel di padding. L’origine non limita da sola dove lo sfondo può essere disegnato.
background-clip Definisce fino a dove vengono disegnati colore e immagini di sfondo. Il valore iniziale è border-box; padding-box esclude il bordo; content-box limita lo sfondo al contenuto. HTML
<div class="riquadro"></div>
CSS
.riquadro {
    width: 260px;
    height: 160px;
    box-sizing: border-box;
    padding: 25px;
    border: 8px dashed #555555;
    background-color: #dceeff;
    background-clip: content-box;
}

L’azzurro compare soltanto nell’area del contenuto. Padding e spazio sotto il bordo mostrano lo sfondo bianco della pagina.

5. Scorrimento dello sfondo

background-attachment controlla il comportamento dello sfondo rispetto allo scorrimento. Questi esempi usano un riquadro con una propria barra: scorri al suo interno per confrontare scroll e local.

5. Scorrimento dello sfondo: esempi e risultati
Proprietà o valoreDescrizioneEsempio HTML e CSSRisultato
background-attachment: scroll Lo sfondo è legato al riquadro dell’elemento. Non scorre insieme al suo contenuto interno. Se l’elemento si sposta durante lo scorrimento della pagina, lo sfondo lo segue. HTML
<div class="riquadro">
    <div class="contenuto">Scorri dentro il riquadro.<br>Il contenuto continua più in basso.</div>
</div>
CSS
.riquadro {
    width: 260px;
    height: 160px;
    box-sizing: border-box;
    overflow: auto;
    background-image: url("sfondo.svg");
    background-repeat: repeat;
    background-attachment: scroll;
}

.contenuto {
    height: 420px;
}

Scorri dentro il riquadro: il contenuto si muove e lo sfondo rimane fermo rispetto al riquadro.
background-attachment: local Lo sfondo è legato al contenuto dell’elemento. Quando scorre il contenuto interno, scorre anche lo sfondo. HTML
<div class="riquadro">
    <div class="contenuto">Scorri dentro il riquadro.<br>Il contenuto continua più in basso.</div>
</div>
CSS
.riquadro {
    width: 260px;
    height: 160px;
    box-sizing: border-box;
    overflow: auto;
    background-image: url("sfondo.svg");
    background-repeat: repeat;
    background-attachment: local;
}

.contenuto {
    height: 420px;
}

Scorri dentro il riquadro: lo sfondo si muove insieme al contenuto.

6. Gradienti e sfondi multipli

I gradienti sono immagini generate dal CSS, senza un file grafico. Si assegnano a background-image. Più immagini possono essere elencate separandole con virgole.

6. Gradienti e sfondi multipli: esempi e risultati
Proprietà o valoreDescrizioneEsempio HTML e CSSRisultato
background-image: linear-gradient() Crea un passaggio di colore lungo una direzione. linear-gradient() è una funzione usata come valore, non una proprietà autonoma. HTML
<div class="riquadro"></div>
CSS
.riquadro {
    width: 260px;
    height: 160px;
    box-sizing: border-box;
    background-image: linear-gradient(to right, #dceeff, #62a981);
}

Il colore passa dall’azzurro a sinistra al verde a destra. Si possono aggiungere altri colori e indicare un angolo, per esempio 45deg.
background-image: radial-gradient() Crea un passaggio di colore che si sviluppa da un centro verso l’esterno. HTML
<div class="riquadro"></div>
CSS
.riquadro {
    width: 260px;
    height: 160px;
    box-sizing: border-box;
    background-image: radial-gradient(circle, #fff4d6, #62a981);
}

Un gradiente circolare passa dal giallo chiaro al verde.
Sfondi multipli La prima immagine elencata è disegnata sopra le successive. Per le proprietà come position e size, i valori separati da virgole corrispondono agli strati nello stesso ordine. HTML
<div class="riquadro"></div>
CSS
.riquadro {
    width: 260px;
    height: 160px;
    box-sizing: border-box;
    background-image:
        url("sfondo.svg"),
        linear-gradient(to right, #fff4d6, #dceeff);
    background-repeat: no-repeat, no-repeat;
    background-position: right bottom, center;
    background-size: 80px auto, cover;
}

Il piccolo paesaggio è nell’angolo inferiore destro, sopra il gradiente che riempie il riquadro.

7. La proprietà abbreviata background

La proprietà background permette di raccogliere diverse impostazioni in una dichiarazione. Dopo aver imparato le singole proprietà, può rendere il codice più compatto.

7. La proprietà abbreviata background: esempi e risultati
Proprietà o valoreDescrizioneEsempio HTML e CSSRisultato
background Imposta insieme colore, immagine, ripetizione, posizione e dimensione. La barra / separa posizione e dimensione. Le proprietà omesse vengono riportate ai valori iniziali. HTML
<div class="riquadro"></div>
CSS
.riquadro {
    width: 260px;
    height: 160px;
    box-sizing: border-box;
    background: #fff4d6 url("sfondo.svg") no-repeat center / contain;
}

Sfondo giallo chiaro, immagine singola centrata e ridimensionata con contain. Il colore è dietro l’immagine.

Il valore fixed di background-attachment

Con background-attachment: fixed; lo sfondo è ancorato alla finestra di visualizzazione anziché al riquadro. Per osservare l’effetto, prova questo codice in una pagina autonoma sufficientemente lunga e scorri la pagina:

body {
    min-height: 1800px;
    background-image: url("sfondo.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

Lo sfondo rimane fermo mentre la pagina scorre. Verifica il risultato sui dispositivi di destinazione: il comportamento di fixed può differire sui browser mobili.

8. Differenze da ricordare

ConfrontoDifferenza
color / background-colorColor modifica il testo; background-color modifica lo sfondo.
width / background-sizeWidth modifica la larghezza del riquadro; background-size modifica la dimensione dell’immagine di sfondo.
cover / containCover riempie l’area e può tagliare l’immagine; contain mostra l’intera immagine e può lasciare zone libere.
background-origin / background-clipOrigin definisce l’area di riferimento delle immagini; clip definisce il limite entro cui disegnare lo sfondo.
Immagine di sfondo / imgUno sfondo non occupa spazio nel flusso e non ha un attributo alt. Per un’immagine che comunica un contenuto usa un elemento img con un testo alternativo appropriato.

Attenzione alla proprietà abbreviata

.riquadro {
    background-image: url("sfondo.svg");
    background-color: lightyellow;
}

Queste due dichiarazioni mantengono sia l’immagine sia il colore. Invece, scrivere in seguito background: lightyellow; reimposta anche le proprietà omesse: l’immagine viene rimossa perché background-image torna a none.

Le percentuali in background-position

Le percentuali mettono in corrispondenza un punto dell’immagine con lo stesso punto dell’area di riferimento. Con 50% 50% si allineano i due centri; con 100% 100% si allineano gli angoli inferiori destri. Non rappresentano semplicemente una distanza dal bordo sinistro o superiore del contenitore.

9. Esempio completo: uno sfondo dietro al testo

Combiniamo immagine, gradiente semitrasparente e colore del testo. Il gradiente è il primo strato e viene disegnato sopra l’immagine, rendendo il testo più leggibile.

HTML

<div class="copertina">
    <h2>Scopri il CSS</h2>
    <p>Colori e immagini danno forma alla pagina.</p>
</div>

CSS

.copertina {
    padding: 30px;
    color: white;
    background-color: #17365d;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
        url("sfondo.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

Risultato

Se l’immagine non compare

  • Controlla che il file esista e che nome, estensione e maiuscole coincidano con il percorso scritto nel CSS.
  • Verifica il percorso rispetto al documento HTML o al foglio CSS esterno.
  • Controlla che l’elemento abbia un’area visibile: un div vuoto senza dimensioni può avere altezza zero.
  • Verifica che una dichiarazione background successiva non abbia rimosso l’immagine.
Per una pagina leggibile: scegli sfondi che lascino distinguere il testo. Un’immagine decorativa può stare nello sfondo; un’immagine necessaria per capire il contenuto richiede un elemento HTML appropriato, come img, e un testo alternativo.