Propiedad background-repeat

La propiedad background-repeat establece cómo se debe repetir la imagen de fondo de un elemento. Por defecto, la imagen se repite tanto en el eje X como en el eje Y, cubriendo así toda el área disponible.

Sintaxis

cssselector {
  background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

Valores

Valor	Descripción
`no-repeat`	La imagen no se repetirá en absoluto.
`repeat-x`	La imagen se repetirá en el eje X.
`repeat-y`	La imagen se repetirá en el eje Y.
`repeat`	La imagen se repetirá en el eje X y en el eje Y.
`space`	La imagen se repetirá tantas veces como sea necesario para llenar completamente el área. Si esto no se puede lograr, se añade espacio vacío entre las imágenes.
`round`	La imagen se repetirá de modo que quepa un número entero de veces en el área. Si esto no se puede lograr, las imágenes de fondo se escalan.

Valor por defecto: repeat - cubre toda la pantalla con el patrón.

Ejemplo

Por defecto, la imagen de fondo embaldosará todo el elemento:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Ejemplo

Hagamos que la imagen no se repita:

html<div id="elem"></div>

css#elem {
  background-repeat: no-repeat;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Ejemplo

Y ahora que la imagen se repita en el eje X:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-x;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Ejemplo

Y ahora en el eje Y:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-y;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Ejemplo

Las imágenes repetidas en los ejes se pueden posicionar usando la propiedad background-position:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-y;
  background-position: top center;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Ejemplo

Veamos cómo funciona el valor space:

html<div id="elem"></div>

css#elem {
  background-repeat: space;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Ejemplo

Veamos cómo funciona el valor round:

html<div id="elem"></div>

css#elem {
  background-repeat: round;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Ver también

la propiedad background,
que es una propiedad abreviada para el fondo