CSS - background-repeat

Descrição

background-repeat define as direções nas quais uma imagem de fundo será repetida (se houver).

Valores possíveis

repeat - Faz com que a imagem de fundo se repita ao longo dos eixos horizontal e vertical.
repeat-x - Faz com que a imagem de fundo seja repetida ao longo do eixo x.
repeat-y - Faz com que a imagem de fundo seja repetida ao longo do eixo y.
no-repeat - Evita que a imagem de fundo seja repetida.

Aplica-se a

Todos os elementos HTML.

Sintaxe DOM

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

Exemplo

A seguir está o exemplo que demonstra como repetir a imagem de fundo se a imagem for pequena. Você pode usar no-repeat valor para background-repeat propriedade, se você não quer repetir uma imagem, nesta imagem caso será exibido apenas uma vez.

Por padrão , a propriedade background-repeat terá um valor de repetição .

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

Isso produzirá o seguinte resultado -

A seguir está o exemplo que demonstra como repetir a imagem de fundo 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>

Isso produzirá o seguinte resultado -

A seguir está o exemplo que demonstra como repetir a imagem de fundo horizontalmente.

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

Isso produzirá o seguinte resultado -

↰ Previous page