Proprietà CSS background-image
La proprietà CSS background-image imposta una o più immagini di sfondo per un elemento, incluse immagini url() e sfumature. Sintassi, sovrapposizione ed esempi pratici.
La proprietà CSS background-image imposta una o più immagini di sfondo per un elemento. L'immagine può essere un file immagine reale referenziato con url(), oppure un'immagine generata da CSS come una sfumatura (gradient).
Per impostazione predefinita, un'immagine di sfondo viene posizionata nell'angolo in alto a sinistra dell'elemento e ripetuta (sia orizzontalmente che verticalmente) per riempire lo spazio disponibile. Puoi controllare questo comportamento con le proprietà correlate background-repeat, background-position, background-size e background-attachment — oppure tutte insieme con la proprietà abbreviata background.
L'area di disegno copre il contenuto dell'elemento, il padding e il box del border, ma non il margin. Puoi modificare quale box viene utilizzato con background-clip e da dove parte il posizionamento con background-origin.
Quando usarla
Usa background-image al posto di un <img> inline quando l'immagine è decorativa e non parte del contenuto — sfondi, texture, sezioni hero, sfumature e icone che non contribuiscono al significato della pagina. Poiché gli sfondi non vengono letti dagli screen reader, non inserire mai qui immagini che veicolano informazioni; usa un <img> con testo alt per quelle.
Alcune cose importanti da sapere sin dall'inizio:
- Associala sempre a un
background-colorcome fallback. Se l'immagine non si carica (o è ancora in download), viene mostrato il colore al suo posto, mantenendo il testo leggibile. - Le immagini multiple si sovrappongono. Quando elenchi più immagini separate da virgole, la prima viene disegnata sopra e ciascuna immagine successiva si trova dietro.
- Anche le sfumature sono immagini.
linear-gradient()eradial-gradient()producono immagini CSS, quindi vanno inbackground-image, non inbackground-color.
| Valore iniziale | none |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter e ::first-line. |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS1 + alcuni nuovi valori in CSS3 |
| Sintassi DOM | object.style.backgroundImage = "url(img_tree.png)"; |
Sintassi
Sintassi della proprietà CSS background-image
background-image: url | none | linear-gradient | radial-gradient | repeating-linear-gradient | repeating-radial-gradient | initial | inherit;Esempio della proprietà background-image:
Esempio della proprietà CSS background-image
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Background-image property example</h2>
<p>Hello World!</p>
</body>
</html>Risultato
Nel prossimo esempio vengono utilizzate due immagini contemporaneamente. Vengono sovrapposte con background-position e background-repeat, e background-attachment: fixed le mantiene fisse mentre la pagina scorre.
Esempio della proprietà background-image con altre proprietà di sfondo:
Esempio della proprietà CSS background-image con 2 immagini
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
padding: 100px;
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-attachment: fixed;
background-position: 5px 50px;
background-repeat: no-repeat, repeat;
}
</style>
</head>
<body>
<h2>Background-image property example</h2>
<p>The background image is positioned 5px from the left, and 50px down from the top.</p>
</body>
</html>Nota gli elenchi separati da virgole sopra: background-repeat: no-repeat, repeat applica no-repeat alla prima immagine e repeat alla seconda, nello stesso ordine in cui le immagini sono elencate. Questa mappatura per immagine è il modo in cui vengono configurati gli sfondi multipli.
Nel prossimo esempio un linear-gradient() con due color stop viene usato come immagine di sfondo per un elemento <div>. Poiché una sfumatura è un'immagine, non è necessario url():
Esempio della proprietà background-image con il valore "linear-gradient":
Esempio della proprietà CSS background-image con valore linear-gradient
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 300px;
background-image: linear-gradient(#eee, #1c87c9);
}
</style>
</head>
<body>
<h2>Linear gradient as a background image example</h2>
<p>This linear gradient starts at the top. It starts gray, transitioning to blue:</p>
<div></div>
</body>
</html>Esempio della proprietà background-image con il valore "repeating-radial-gradient":
Esempio della proprietà CSS background-image con valore repeating-radial-gradient
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
height: 300px;
background-color: #cccccc;
background-image: repeating-radial-gradient(#8ebf42, #eee 15%, #ccc 30%);
}
</style>
</head>
<body>
<h2>Radial gradient as a background image example</h2>
<div></div>
</body>
</html>Errori comuni
- L'immagine è invisibile perché l'elemento non ha altezza. Uno sfondo ha bisogno di un box su cui essere disegnato. Un
<div>vuoto si riduce a altezza zero, quindi assegnagli unheightesplicito (come negli esempi con le sfumature) oppure del contenuto. - Un
404dello sfondo fallisce silenziosamente. A differenza di<img>, unurl()non funzionante non produce alcun errore né icona rotta — l'area rimane semplicemente vuota (o mostra ilbackground-color). Controlla il percorso se non appare nulla. - Usa
background-color, nonbackground-image, per un colore solido. Le sfumature vanno inbackground-image; i colori piatti appartengono abackground-color. - La ripetizione sembra sbagliata? Aggiungi
background-repeat: no-repeate dimensiona l'immagine conbackground-size(ad esempiocoverper riempire il box).
Valori
| Valore | Descrizione |
|---|---|
| url | Definisce l'URL dell'immagine. È possibile specificare più immagini separate da virgole. |
| none | Non verrà visualizzata alcuna immagine di sfondo. È il valore predefinito. |
| linear-gradient | Viene specificata una sfumatura lineare come immagine di sfondo. |
| radial-gradient | Viene specificata una sfumatura radiale come immagine di sfondo. |
| repeating-linear-gradient | Ripete una sfumatura lineare. |
| repeating-radial-gradient | Ripete una sfumatura radiale. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |