Propiedad background-repeat

DefiniciónControla el tipo de repetición de las imágenes de fondo
Valores
permitidos
Uno y sólo uno de los siguientes valores:
  • repeat
  • repeat-x
  • repeat-y
  • no-repeat
  • inherit
Valor inicialrepeat
Se aplica aTodos los elementos
Válida enmedios visuales
Se heredano
Definición en
el estándar
w3.org/TR/CSS21/colors.html#propdef-background-repeat

Ejemplos de uso

La propiedad background-repeat controla la forma en la que se repiten las imágenes de fondo de los elementos. Por defecto, si la imagen de fondo que se establece con la propiedad background-image es más pequeña que el sitio disponible, el navegador repite la imagen en todas las direcciones hasta cubrir completamente la superficie del elemento:

div { background-image: url("images/imagen_pequena.png"); }
Imagen original

Utilizando la propiedad background-repeat es posible controlar si la imagen de fondo se repite o no y la forma en la que se repite. El valor repeat coincide con el comportamiento por defecto del navegador y repite la imagen en todas las direcciones.

El valor no-repeat muestra la imagen de fondo sin realizar ninguna repetición:

div {
  background-image: url("images/imagen_pequena.png");
  background-repeat: no-repeat;
}

Cuando la imagen no se repite, por defecto se muestra en la esquina superior izquierda del elemento. CSS permite modificar la posición de la imagen de fondo mediante la propiedad background-position.

Por otra parte, los valores repeat-x y repeat-y permiten repetir la imagen de fondo sólo en una dirección (horizontal o vertical). El valor repeat-x repite la imagen de forma horizontal:

div {
  background-image: url("images/imagen_pequena.png");
  background-repeat: repeat-x;
}

La imagen de fondo repetida horizontalmente se muestra por defecto en la parte superior del elemento. Utilizando la propiedad background-position es posible desplazarla a otra posición:

div {
  background-image: url("images/imagen_pequena.png");
  background-repeat: repeat-x;
  background-position: 30px;
}

De forma similar, el valor repeat-y se emplea para repetir la imagen de fondo verticalmente:

div {
  background-image: url("images/imagen_pequena.png");
  background-repeat: repeat-y;
}

La imagen de fondo repetida verticalmente se muestra por defecto en la parte izquierda del elemento. Utilizando la propiedad background-position es posible desplazarla a otra posición:

div {
  background-image: url("images/imagen_pequena.png");
  background-repeat: repeat-y;
  background-position: 30px;
}