| Definición | Controla el tipo de repetición de las imágenes de fondo |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores:
|
| Valor inicial | repeat |
| Se aplica a | Todos los elementos |
| Válida en | medios visuales |
| Se hereda | no |
| 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:
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;
}