Proprietà CSS background-repeat
La proprietà CSS background-repeat definisce come viene ripetuta l'immagine di sfondo. Scopri i valori con esempi pratici.
La proprietà background-repeat controlla come un'immagine di sfondo viene affiancata nell'area di disegno di un elemento. Per impostazione predefinita un'immagine di sfondo è troppo piccola per coprire l'intero elemento, quindi il browser la ripete come carta da parati — su entrambi gli assi — fino a riempire il riquadro.
Questa pagina tratta ogni valore di background-repeat, quando utilizzarli e la sottile differenza tra space e round (i due valori che vengono fraintesi più spesso).
I valori si dividono in tre gruppi:
- Affianca o non affianca:
repeat(il valore predefinito) affianca in entrambe le direzioni;no-repeatmostra l'immagine una volta sola. - Affianca su un solo asse:
repeat-xaffianca solo orizzontalmente;repeat-yaffianca solo verticalmente. - Affianca senza tile parziali:
spacemantiene ogni tile intero e distribuisce lo spazio extra come gap tra di essi;roundridimensiona i tile in modo che un numero intero di essi riempia l'area senza gap.
background-repeat funziona insieme a background-image (che fornisce l'immagine) e a background-position (che imposta il punto di partenza dell'affiancamento). È anche uno dei valori che puoi impostare con la proprietà abbreviata background.
Quando si utilizza?
no-repeatè il valore più comune nei layout moderni — una singola foto hero, un logo o un'icona che poi si ridimensiona conbackground-sizee si posiziona conbackground-position.repeatè ideale per texture e pattern senza giunture (grana della carta, rumore, griglie di punti) quando si desidera che riempiano un riquadro di qualsiasi dimensione.repeat-x/repeat-ysi adattano a strisce decorative: un bordo superiore ripetuto, un divisore verticale o un gradiente che deve affiancarsi lungo un solo asse.space/roundsono utili quando l'immagine ha bordi netti (come piastrelle o miniature) e non si vuole che vengano tagliati dove il bordo del riquadro cade a metà tile.
By default, the image will be displayed in the top left corner without background-position property.
| Initial Value | repeat |
|---|---|
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | element.style.backgroundRepeat = "repeat-x"; |
Sintassi
Sintassi della proprietà CSS background-repeat
background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit;Esempio della proprietà background-repeat:
Esempio della proprietà CSS background-repeat con il valore repeat
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: repeat;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>Risultato
Nell'esempio seguente l'immagine di sfondo viene mostrata una sola volta perché è impostato no-repeat.
Esempio della proprietà background-repeat con il valore "no-repeat":
Esempio della proprietà CSS background-repeat con il valore no-repeat
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>Nell'esempio successivo, la background-image viene ripetuta solo orizzontalmente.
Esempio della proprietà background-repeat con il valore "repeat-x":
Esempio della proprietà CSS background-repeat con il valore repeat-x
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>Qui il valore "repeat-y" fa sì che l'immagine venga ripetuta solo verticalmente.
Esempio della proprietà background-repeat con il valore "repeat-y":
Esempio della proprietà CSS background-repeat con il valore repeat-y
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>Con space, l'immagine mantiene le sue dimensioni originali — il browser inserisce quanti tile interi riesce senza tagliarli e distribuisce lo spazio rimanente come gap uniformi tra di essi, così nessun tile viene mai tagliato.
Esempio della proprietà background-repeat con il valore "space":
Esempio della proprietà CSS background-repeat con il valore space
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: space;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>Con round, non ci sono gap: il browser ridimensiona l'immagine verso l'alto o il basso in modo che un numero intero di tile riempia esattamente l'area. Questo può distorcere leggermente l'immagine, che è il compromesso che round accetta per evitare i gap.
Esempio della proprietà background-repeat con il valore "round":
Esempio della proprietà CSS background-repeat con il valore round
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: round;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>Valori
| Valore | Descrizione | Prova |
|---|---|---|
| repeat | L'immagine di sfondo viene ripetuta sia orizzontalmente che verticalmente. Questo è il valore predefinito. | Prova » |
| repeat-x | L'immagine di sfondo viene ripetuta solo orizzontalmente. | Prova » |
| repeat-y | L'immagine di sfondo viene ripetuta solo verticalmente. | Prova » |
| no-repeat | L'immagine di sfondo non viene ripetuta. | Prova » |
| space | L'immagine viene ripetuta quante volte intera ci sta senza essere tagliata; lo spazio rimanente viene distribuito come gap uguali tra i tile (il primo e l'ultimo tile toccano i bordi). | Prova » |
| round | L'immagine viene ridimensionata in modo che un numero intero di tile riempia l'area senza gap; i tile vengono allungati o compressi per adattarsi. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dall'elemento genitore. |
Errori comuni
spaceeroundsono valori reali. Entrambi fanno parte dello standard e affiancano senza tile parziali —spaceaggiunge gap,roundridimensiona l'immagine.no-repeatnon ridimensiona l'immagine. Per fare in modo che una singola immagine copra il riquadro, abbinano-repeata background-size.- La posizione determina dove inizia l'affiancamento. Quando si ripete,
background-positionsposta l'intera griglia di tile, quindi due affiancamenti possono apparire diversi anche con la stessa immagine — imposta background-position in modo intenzionale. - Esiste anche la sintassi a due valori. Puoi passare una parola chiave per asse, ad esempio
background-repeat: repeat-x;equivale abackground-repeat: repeat no-repeat;.