CSS - répétition d'arrière-plan

La description

background-repeat définit les directions dans lesquelles une image d'arrière-plan sera répétée (le cas échéant).

Valeurs possibles

  • repeat - Provoque la répétition de l'image d'arrière-plan le long des axes horizontal et vertical.

  • repeat-x - Provoque la répétition de l'image d'arrière-plan le long de l'axe x.

  • repeat-y - Provoque la répétition de l'image d'arrière-plan le long de l'axe y.

  • no-repeat - Empêche du tout l'image d'arrière-plan d'être répétée.

S'applique à

Tous les éléments HTML.

Syntaxe DOM

object.style.backgroundRepeat = "Any of the above values";

Exemple

Voici l'exemple qui montre comment répéter l'image d'arrière-plan si l'image est petite. Vous pouvez utiliser la valeur sans répétition pour la propriété background-repeat si vous ne voulez pas répéter une image, dans ce cas, l'image ne s'affichera qu'une seule fois.

Par défaut , la propriété background-repeat aura une valeur de répétition .

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat;
         }
      </style>
   </head>
   
   <body>
      <p>Tutorials point</p>
   </body>
</html>

Il produira le résultat suivant -

Voici l'exemple qui montre comment répéter l'image d'arrière-plan verticalement.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-y;
         }
      </style>
   </head>
   
   <body>
      <p>Tutorials point</p>
   </body>
</html>

Il produira le résultat suivant -

Voici l'exemple qui montre comment répéter l'image d'arrière-plan horizontalement.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-x;
         }
      </style>
   </head>
   
   <body>
      <p>Tutorials point</p>
   </body>
</html>

Il produira le résultat suivant -