CSS - repetición de fondo

Descripción

background-repeat define las direcciones en las que se repetirá una imagen de fondo (si corresponde).

Valores posibles

repeat - Hace que la imagen de fondo se repita a lo largo de los ejes horizontal y vertical.
repeat-x - Hace que la imagen de fondo se repita a lo largo del eje x.
repeat-y - Hace que la imagen de fondo se repita a lo largo del eje y.
no-repeat - Evita que la imagen de fondo se repita en absoluto.

Se aplica a

Todos los elementos HTML.

Sintaxis DOM

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

Ejemplo

A continuación se muestra el ejemplo que demuestra cómo repetir la imagen de fondo si la imagen es pequeña. Puede usar el valor de no repetición para la propiedad de repetición de fondo si no desea repetir una imagen; en este caso, la imagen se mostrará solo una vez.

Por defecto , la propiedad background-repeat tendrá un valor de repetición .

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

Producirá el siguiente resultado:

A continuación se muestra el ejemplo que demuestra cómo repetir la imagen de fondo 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>

Producirá el siguiente resultado:

A continuación se muestra el ejemplo que demuestra cómo repetir la imagen de fondo 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>

Producirá el siguiente resultado:

↰ Previous page