Propriété background-repeat

La propriété background-repeat définit la manière de répéter l'image de fond d'un élément. Par défaut, l'image se répète à la fois selon l'axe X et l'axe Y, couvrant ainsi toute la zone disponible.

Syntaxe

sélecteur {
	background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

Valeurs

Valeur	Description
`no-repeat`	L'image ne sera pas du tout répétée.
`repeat-x`	L'image sera répétée selon l'axe X.
`repeat-y`	L'image sera répétée selon l'axe Y.
`repeat`	L'image sera répétée selon l'axe X et l'axe Y.
`space`	L'image se répétera autant de fois que nécessaire pour remplir complètement la zone, si cela n'est pas possible, un espace vide est ajouté entre les images.
`round`	L'image se répétera de manière à ce qu'un nombre entier d'images tienne dans la zone, si cela n'est pas possible, les images de fond sont redimensionnées.

Valeur par défaut : repeat - couvre tout l'écran avec le motif.

Exemple

Par défaut, l'image de fond recouvrira l'intégralité de l'élément :

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

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

Exemple

Faisons en sorte que l'image ne se répète pas :

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

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

Exemple

Maintenant, que l'image se répète selon l'axe X :

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

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

Exemple

Et maintenant selon l'axe Y :

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

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

Exemple

Les images répétées selon les axes peuvent être positionnées à l'aide de la propriété 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;
}

Exemple

Voyons comment fonctionne la valeur space :

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

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

Exemple

Voyons comment fonctionne la valeur round :

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

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

Voir aussi

la propriété background,
qui est une propriété raccourcie pour le fond