CSS - ripetizione in background

Descrizione

background-repeat definisce le direzioni in cui verrà ripetuta un'immagine di sfondo (se presente).

Possibili valori

  • repeat - Fa sì che l'immagine di sfondo venga ripetuta lungo l'asse orizzontale e quello verticale.

  • repeat-x - Fa sì che l'immagine di sfondo venga ripetuta lungo l'asse x.

  • repeat-y - Fa sì che l'immagine di sfondo venga ripetuta lungo l'asse y.

  • no-repeat - Impedisce la ripetizione dell'immagine di sfondo.

Si applica a

Tutti gli elementi HTML.

Sintassi DOM

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

Esempio

Di seguito è riportato l'esempio che dimostra come ripetere l'immagine di sfondo se l'immagine è piccola. È possibile utilizzare il valore di non ripetizione per la proprietà di ripetizione dello sfondo se non si desidera ripetere un'immagine, in questo caso l'immagine verrà visualizzata solo una volta.

Per impostazione predefinita , la proprietà di ripetizione dello sfondo avrà un valore di ripetizione .

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

Produrrà il seguente risultato:

Di seguito è riportato l'esempio che dimostra come ripetere l'immagine di sfondo verticalmente.

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

Produrrà il seguente risultato:

Di seguito è riportato l'esempio che dimostra come ripetere l'immagine di sfondo orizzontalmente.

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

Produrrà il seguente risultato: