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.

Par défaut, l'image sera affichée au coin supérieur gauche sans propriété 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+


Trouvez-vous cela utile?

Articles Associées