Propriété CSS background-repeat
La propriété background-repeat définit comment l'image du fond doit être répétée. Par sa valeur initiale, la propriété background-repeat est répétée à la fois horizontalement et verticalement. S'il y a la valeur "repeat-x", l'image ne sera répétée que horizontalement. S'il y a la valeur "repeat-y", l'image ne sera répété que verticalement. Il existe deux autres valeurs: "space" et "round". "Space" fait l'image être répétée sans coupure et "round" fait l'image être répétée sans interstice.
On a besoin d'utiliser la propriété background-repeat avec les propriétés background-image et background-position.
| Valeur initiale | repeat |
| Appliquée à | Tous les éléments. Elle est aussi appliquée aux éléments pseudos ::first-letter et ::first-line. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS1 |
| Syntaxe DOM | object.style.backgroundRepeat = "repeat-x"; |
Syntaxe
background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit;Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: repeat;
}
</style>
</head>
<body>
<h2>C'est quelque titre pour un exemple.</h2>
<p>Quelque paragraphe pour un exemple.</p>
</body>
</html>Dans l'exemple suivant, la propriété the background-image n'est pas répétée.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>C'est quelque titre pour un exemple.</h2>
<p>Quelque paragraphe pour un exemple.</p>
</body>
</html>Un autre exemple, où la valeur "repeat-x" est appliquée. Elle fait la propriété background-image n'être répétée que horizontalement.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h2>C'est quelque titre pour un exemple.</h2>
<p>Quelque paragraphe pour un exemple.</p>
</body>
</html>Maintenant essayons un exemple avec la valeur "repeat-y". Elle fait l'image n'être répétée que verticalement .
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h2>C'est quelque titre pour un exemple.</h2>
<p>Quelque paragraphe pour un exemple.</p>
</body>
</html>Essayons un exemple avec la valeur "space". Ici background-image est répétée sans coupure.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: space;
}
</style>
</head>
<body>
<h2>C'est quelque titre pour un exemple.</h2>
<p>Quelque paragraphe pour un exemple.</p>
</body>
</html>Un autre exemple avec la valeur "round". Elle fait la background-image être répétée sans interstice.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: round;
}
</style>
</head>
<body>
<h2>C'est quelque titre pour un exemple.</h2>
<p>Quelque paragraphe pour un exemple.</p>
</body>
</html>valeurs
| Valeur | Description |
|---|---|
| repeat | L'image du fond est répétée à la fois horizontalement et verticalement. C'est la valeur initiale. |
| repeat-x | L'image du fond n'est répétée que horizontalement. |
| repeat-y | L'image du fond n'est répétée que verticalement. |
| no-repeat | L'image du fond n'est pas répétée. |
| space | L'image du fond est répétée autant que possible sans coupure. |
| round | L'image du fond est répétée sans interstice. |
| initial | Définit la valeur initiale. |
| inherit | Hérite la propriété de l'élément parent. |
Support de Navigateurs
|
|
|
|
|---|---|---|---|
| 1.0+ | 1.0+ | 1.0+ | 3.5+ |
Pratiquez vos connaissances
