Proprietà CSS background-size
La proprietà CSS background-size imposta la dimensione dell'immagine di sfondo. Scopri i valori disponibili e prova gli esempi.
La proprietà CSS background-size imposta la dimensione renderizzata dell'immagine di sfondo di un elemento. Per impostazione predefinita, un'immagine di sfondo viene mostrata nella sua dimensione naturale (intrinseca); background-size permette di scalarla a dimensioni esatte, allungarla tramite percentuali, oppure farla riempire o adattare automaticamente all'elemento.
Questa pagina illustra tutti i valori accettati dalla proprietà, la differenza tra le due parole chiave più utili (cover e contain), il comportamento con sfondi multipli e degli esempi eseguibili per ogni caso. È una delle proprietà CSS3.
Panoramica dei valori
La proprietà accetta questi valori:
auto— il valore predefinito. L'immagine mantiene la sua dimensione e proporzione intrinseche.<length>— larghezza e altezza esplicite, ad es.300px 200px. I valori negativi non sono validi.<percentage>— dimensioni relative all'area di posizionamento dello sfondo dell'elemento, ad es.40% 100%. I valori negativi non sono validi.cover— scala l'immagine (mantenendo il rapporto d'aspetto) finché non copre completamente l'elemento. L'eccesso viene ritagliato.contain— scala l'immagine (mantenendo il rapporto d'aspetto) finché non si adatta perfettamente all'interno dell'elemento. Possono essere lasciate delle aree vuote.
Quando si forniscono due valori, il primo è la larghezza e il secondo è l'altezza. Se si fornisce un solo valore, esso imposta la larghezza e l'altezza viene impostata automaticamente su auto, in modo che l'immagine mantenga il suo rapporto d'aspetto.
cover vs. contain — quale usare
Queste due parole chiave sono le più utilizzate ed è facile confonderle:
covergarantisce che non ci siano spazi vuoti — l'immagine riempie sempre il riquadro. Il compromesso è che alcune parti dell'immagine potrebbero essere ritagliate quando il suo rapporto d'aspetto non corrisponde all'elemento. Usalo per banner hero e sfondi di sezione a piena larghezza dove non vuoi mai spazi vuoti.containgarantisce che l'intera immagine sia visibile — niente viene ritagliato. Il compromesso è che possono comparire strisce vuote ai lati o in alto/basso. Usalo per loghi, icone o qualsiasi immagine che devi mostrare per intero.
Entrambi mantengono il rapporto d'aspetto originale, quindi l'immagine non viene mai distorta. Per allungare un'immagine a dimensioni esatte (il che può distorcerla), usa invece valori espliciti <length> o <percentage>.
Immagini con e senza dimensioni intrinseche
Alcune immagini, come JPEG e PNG, hanno dimensioni e proporzioni intrinseche. Altre, come i gradienti CSS, non le hanno. Un'immagine senza dimensioni intrinseche occupa l'intera dimensione dell'area di sfondo dell'elemento a meno che non si specifichi diversamente, quindi background-size si comporta in modo leggermente diverso con i gradienti rispetto alle immagini raster.
Immagini di sfondo multiple
background-size accetta valori separati da virgola. Quando un elemento ha più immagini di sfondo, ogni dimensione viene abbinata a un'immagine di sfondo in ordine — il primo valore si applica alla prima background-image, il secondo alla seconda e così via:
background-image: url("logo.png"), url("texture.png");
background-size: 100px 100px, cover;| Valore iniziale | auto |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter e ::first-line. |
| Ereditato | No. |
| Animabile | Sì. La dimensione dell'immagine di sfondo è animabile. |
| Versione | CSS3 |
| Sintassi DOM | object.style.backgroundSize = "50% 100%"; |
Sintassi
Sintassi della proprietà CSS background-size
background-size: auto | length | percentage | cover | contain | initial | inherit;La proprietà background-size viene spesso utilizzata con la shorthand background, ad esempio:
background: url("image.jpg") no-repeat center / cover;Esempio della proprietà background-size:
Esempio della proprietà CSS background-size con valore px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: 300px 200px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Risultato
Nell'esempio precedente viene applicato il valore lunghezza. Esso imposta la larghezza e l'altezza dell'immagine di sfondo. Il primo valore imposta la larghezza e il secondo imposta l'altezza. Se viene fornito un solo valore, il secondo viene impostato su auto.
Vedi un altro esempio in cui la larghezza e l'altezza della background-image sono definite tramite percentuali.
Esempio della proprietà background-size con il valore "%":
Esempio della proprietà CSS background-size con valore % (percentuale)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: 40% 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Il valore cover rende l'immagine il più grande possibile senza allungarla.
Esempio della proprietà background-size con il valore "cover":
Esempio della proprietà CSS background-size con valore cover
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Esempio della proprietà background-size con il valore "contain":
Esempio della proprietà CSS background-size con il valore "contain":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: contain;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Esempio della proprietà background-size con il valore "auto":
Esempio della proprietà CSS background-size con il valore "auto":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: auto;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Esempio della proprietà background-size con un singolo valore di lunghezza:
Qui viene fornito un singolo valore (260px), quindi la larghezza viene impostata esplicitamente e l'altezza torna a auto, preservando il rapporto d'aspetto dell'immagine all'interno di un <div> di dimensioni fisse.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 260px;
height: 190px;
background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg") no-repeat;
background-size: 260px;
}
</style>
</head>
<body>
<h1>CSS background-size property </h1>
<p>Example of the background-size property with a length value.</p>
<div></div>
</body>
</html>Valori
| Valore | Descrizione | Prova |
|---|---|---|
| auto | È il valore predefinito. Imposta l'immagine di sfondo nella sua dimensione originale. | Prova » |
| length | Imposta la larghezza e l'altezza dell'immagine di sfondo. Il primo valore imposta la larghezza e il secondo imposta l'altezza. Se viene fornito un solo valore, il secondo viene impostato su auto. È specificato in "px", "em". | Prova » |
| percentage | Imposta la larghezza e l'altezza tramite percentuali. Il primo valore imposta la larghezza e il secondo imposta l'altezza. Se viene fornito un solo valore, il secondo viene impostato su auto. | Prova » |
| cover | Scala l'immagine di sfondo il più grande possibile per coprire tutta l'area di sfondo. | Prova » |
| contain | Scala l'immagine di sfondo alla dimensione massima in modo che la larghezza e l'altezza possano rientrare nell'area di sfondo. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dal suo elemento genitore. |
Suggerimenti e proprietà correlate
background-sizeviene comunemente combinata conbackground-positionebackground-repeatper controllare esattamente come l'immagine viene posizionata e scalata.- Nella shorthand
background, la dimensione viene dopo la posizione, separata da una barra:background: url("image.jpg") no-repeat center / cover;. La posizione è obbligatoria quando si fornisce una dimensione in questo modo. - Per scalare un elemento
<img>(anziché uno sfondo CSS) controllando il ritaglio, usaobject-fit, che offre lo stesso comportamentocoverecontainper gli elementi sostituiti. coverecontainrendono semplici gli sfondi a pagina intera o responsive: abbinarebackground-size: covercon unbackground-attachmentfisso produce un classico hero a piena larghezza che si adatta a qualsiasi viewport.