Propriété CSS background-repeat
La propriété CSS background-repeat contrôle la répétition de l'image de fond. Découvrez les valeurs et essayez des exemples pour chacune d'elles.
La propriété background-repeat contrôle la façon dont une image de fond est répétée en mosaïque dans la zone de rendu d'un élément. Par défaut, une image de fond est trop petite pour couvrir entièrement un élément, de sorte que le navigateur la répète comme un fond peint — dans les deux axes — jusqu'à ce que la boîte soit remplie.
Cette page couvre toutes les valeurs de background-repeat, quand utiliser chacune d'elles, et la différence subtile entre space et round (les deux valeurs que les gens se trompent le plus souvent).
Les valeurs se répartissent en trois groupes :
- Mosaïque ou non :
repeat(la valeur par défaut) répète dans les deux directions ;no-repeataffiche l'image une seule fois. - Mosaïque sur un seul axe :
repeat-xrépète horizontalement uniquement ;repeat-yrépète verticalement uniquement. - Mosaïque sans tuiles partielles :
spaceconserve chaque tuile entière et répartit l'espace restant en espaces entre elles ;roundétire ou rétrécit les tuiles pour qu'un nombre entier d'entre elles tienne sans espaces.
background-repeat fonctionne conjointement avec background-image (qui fournit l'image) et background-position (qui définit le point de départ de la répétition). C'est également l'une des valeurs que vous pouvez définir avec la propriété raccourcie background.
Quand l'utiliser ?
no-repeatest la valeur la plus courante dans les mises en page modernes — une seule photo de héros, un logo ou une icône que vous dimensionnez ensuite avecbackground-sizeet positionnez avecbackground-position.repeatest idéal pour les textures et motifs sans coutures (grain de papier, bruit, grilles de points) que vous souhaitez remplir dans n'importe quelle taille de boîte.repeat-x/repeat-yconviennent aux bandes décoratives : une bordure supérieure répétée, un séparateur vertical ou un dégradé qui doit se répéter le long d'un seul axe.space/roundsont utiles lorsque l'image a des bords nets (comme des carreaux ou des vignettes) et que vous ne voulez pas qu'ils soient coupés là où le bord de la boîte tombe au milieu d'une tuile.
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"; |
Syntaxe
Syntaxe de la propriété CSS background-repeat
background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit;Exemple de la propriété background-repeat :
Exemple de la propriété CSS background-repeat avec la valeur 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>Résultat
Dans l'exemple suivant, l'image de fond n'est affichée qu'une seule fois car no-repeat est défini.
Exemple de la propriété background-repeat avec la valeur « no-repeat » :
Exemple de la propriété CSS background-repeat avec la valeur 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>Dans l'exemple suivant, l'image de fond est répétée uniquement horizontalement.
Exemple de la propriété background-repeat avec la valeur « repeat-x » :
Exemple de la propriété CSS background-repeat avec la valeur 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>Ici, la valeur repeat-y fait que l'image est répétée uniquement verticalement.
Exemple de la propriété background-repeat avec la valeur « repeat-y » :
Exemple de la propriété CSS background-repeat avec la valeur 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>Avec space, l'image conserve sa taille d'origine — le navigateur place autant de tuiles entières que possible et répartit l'espace restant en espaces égaux entre elles, de sorte qu'aucune tuile n'est jamais coupée.
Exemple de la propriété background-repeat avec la valeur « space » :
Exemple de la propriété CSS background-repeat avec la valeur 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>Avec round, il n'y a aucun espace : le navigateur redimensionne l'image à la hausse ou à la baisse de façon à ce qu'un nombre entier de tuiles remplisse exactement la zone. Cela peut légèrement déformer l'image, ce qui est le compromis que round accepte pour éviter les espaces.
Exemple de la propriété background-repeat avec la valeur « round » :
Exemple de la propriété CSS background-repeat avec la valeur 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>Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| repeat | L'image de fond est répétée horizontalement et verticalement. C'est la valeur par défaut. | Essayer » |
| repeat-x | L'image de fond est répétée uniquement horizontalement. | Essayer » |
| repeat-y | L'image de fond est répétée uniquement verticalement. | Essayer » |
| no-repeat | L'image de fond n'est pas répétée. | Essayer » |
| space | L'image est répétée autant de fois que possible sans être coupée ; l'espace restant est réparti en espaces égaux entre les tuiles (la première et la dernière tuile touchent les bords). | Essayer » |
| round | L'image est redimensionnée pour qu'un nombre entier de tuiles remplisse la zone sans espaces ; les tuiles sont étirées ou compressées pour s'adapter. | Essayer » |
| initial | Définit la propriété à sa valeur par défaut. | Essayer » |
| inherit | Hérite de la propriété de son élément parent. |
Pièges courants
spaceetroundsont de vraies valeurs. Toutes deux font partie de la norme et répètent sans tuiles partielles —spaceajoute des espaces,roundredimensionne l'image.no-repeatne redimensionne pas l'image. Pour qu'une seule image couvre la boîte, associezno-repeatavec background-size.- La position définit le point de départ de la répétition. Lors de la répétition,
background-positiondécale la grille entière de tuiles, de sorte que deux répétitions peuvent avoir un aspect différent même avec la même image — définissez background-position intentionnellement. - La syntaxe à deux valeurs existe aussi. Vous pouvez passer un mot-clé par axe, par exemple
background-repeat: repeat-x;est équivalent àbackground-repeat: repeat no-repeat;.