Proprietà background-repeat

La proprietà background-repeat specifica come ripetere l'immagine di sfondo di un elemento. Per impostazione predefinita, l'immagine si ripete sia lungo l'asse X, sia lungo l'asse Y, coprendo così l'intera area disponibile.

Sintassi

selettore {
	background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

Valori

Valore	Descrizione
`no-repeat`	L'immagine non verrà ripetuta affatto.
`repeat-x`	L'immagine verrà ripetuta lungo l'asse X.
`repeat-y`	L'immagine verrà ripetuta lungo l'asse Y.
`repeat`	L'immagine verrà ripetuta lungo l'asse X e lungo l'asse Y.
`space`	L'immagine si ripeterà tante volte quanto necessario per riempire completamente l'area, se ciò non è possibile, viene aggiunto spazio vuoto tra le immagini.
`round`	L'immagine si ripeterà in modo tale che nell'area ci sia un numero intero di immagini, se ciò non è possibile, le immagini di sfondo vengono scalate.

Valore predefinito: repeat - copre l'intera area con il motivo.

Esempio

Per impostazione predefinita, l'immagine di sfondo ricoprirà tutto l'elemento:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Esempio

Facciamo in modo che l'immagine non si ripeta:

<div id="elem"></div>

#elem {
	background-repeat: no-repeat;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Esempio

E ora facciamo ripetere l'immagine lungo l'asse X:

<div id="elem"></div>

#elem {
	background-repeat: repeat-x;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Esempio

E ora lungo l'asse Y:

<div id="elem"></div>

#elem {
	background-repeat: repeat-y;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Esempio

Le immagini ripetute lungo gli assi possono essere posizionate utilizzando la proprietà background-position:

<div id="elem"></div>

#elem {
	background-repeat: repeat-y;
	background-position: top center;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Esempio

Vediamo come funziona il valore space:

<div id="elem"></div>

#elem {
	background-repeat: space;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Esempio

Vediamo come funziona il valore round:

<div id="elem"></div>

#elem {
	background-repeat: round;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Vedi anche

la proprietà background,
che è una proprietà abbreviata per lo sfondo