Propiedad CSS background-repeat
background-repeat es una propiedad CSS que define cómo se repite la imagen de fondo. Aprende los valores y prueba ejemplos con cada uno de ellos.
La propiedad background-repeat controla cómo se repite en mosaico una imagen de fondo en el área de pintado de un elemento. Por defecto, una imagen de fondo es demasiado pequeña para cubrir todo el elemento, por lo que el navegador la repite como papel tapiz — en ambos ejes — hasta rellenar el cuadro.
Esta página cubre todos los valores de background-repeat, cuándo usar cada uno y la diferencia sutil entre space y round (los dos valores que más confunden a los desarrolladores).
Los valores se agrupan en tres categorías:
- Mosaico o no:
repeat(el valor por defecto) aplica mosaico en ambas direcciones;no-repeatmuestra la imagen una sola vez. - Mosaico en un eje:
repeat-xaplica mosaico solo horizontalmente;repeat-ysolo verticalmente. - Mosaico sin teselas parciales:
spacemantiene cada tesela completa y distribuye el espacio sobrante como separaciones entre ellas;roundestira o encoge las teselas para que quepa un número entero de ellas sin espacios.
background-repeat funciona junto con background-image (que suministra la imagen) y background-position (que establece el punto de inicio del mosaico). También es uno de los valores que se pueden definir con la abreviatura background.
¿Cuándo usarlo?
no-repeates el más habitual en los diseños modernos — una sola foto de héroe, un logotipo o un icono que luego se dimensiona conbackground-sizey se coloca conbackground-position.repeates ideal para texturas y patrones continuos (papel, ruido, cuadrículas de puntos) cuando se desea que rellenen cualquier tamaño de cuadro.repeat-x/repeat-yson adecuados para franjas decorativas: un borde superior repetido, un divisor vertical o un degradado que debe repetirse a lo largo de un eje.space/roundson importantes cuando la imagen tiene bordes bien definidos (como baldosas o miniaturas) y no se desea que queden cortadas donde el borde del cuadro cae en mitad de una tesela.
By default, the image will be displayed in the top left corner without background-position property.
| Valor inicial | repeat |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredable | No. |
| Animable | No. |
| Versión | CSS1 |
| Sintaxis DOM | element.style.backgroundRepeat = "repeat-x"; |
Sintaxis
Sintaxis de la propiedad CSS background-repeat
background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit;Ejemplo de la propiedad background-repeat:
Ejemplo de la propiedad CSS background-repeat con el valor repeat
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: repeat;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>Resultado
En el siguiente ejemplo, la imagen de fondo se muestra solo una vez porque se establece el valor no-repeat.
Ejemplo de la propiedad background-repeat con el valor "no-repeat":
Ejemplo de la propiedad CSS background-repeat con el valor no-repeat
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>En el siguiente ejemplo, la imagen de fondo se repite solo horizontalmente.
Ejemplo de la propiedad background-repeat con el valor "repeat-x":
Ejemplo de la propiedad CSS background-repeat con el valor repeat-x
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>Aquí, el valor "repeat-y" hace que la imagen se repita solo verticalmente.
Ejemplo de la propiedad background-repeat con el valor "repeat-y":
Ejemplo de la propiedad CSS background-repeat con el valor repeat-y
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>Con space, la imagen mantiene su tamaño original — el navegador encaja tantas teselas completas como sea posible y distribuye el espacio restante como separaciones iguales entre ellas, por lo que ninguna tesela queda cortada.
Ejemplo de la propiedad background-repeat con el valor "space":
Ejemplo de la propiedad CSS background-repeat con el valor space
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: space;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>Con round, no hay espacios en absoluto: el navegador redimensiona la imagen hacia arriba o hacia abajo para que un número entero de teselas rellene exactamente el área. Esto puede distorsionar levemente la imagen, que es el sacrificio que hace round para evitar espacios.
Ejemplo de la propiedad background-repeat con el valor "round":
Ejemplo de la propiedad CSS background-repeat con el valor round
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: round;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| repeat | La imagen de fondo se repite tanto horizontal como verticalmente. Este es el valor por defecto. | Pruébalo » |
| repeat-x | La imagen de fondo se repite solo horizontalmente. | Pruébalo » |
| repeat-y | La imagen de fondo se repite solo verticalmente. | Pruébalo » |
| no-repeat | La imagen de fondo no se repite. | Pruébalo » |
| space | La imagen se repite tantas veces completas como quepan sin recortarse; el espacio sobrante se distribuye como separaciones iguales entre las teselas (la primera y la última tocan los bordes). | Pruébalo » |
| round | La imagen se reescala para que un número entero de teselas rellene el área sin espacios; las teselas se estiran o comprimen para ajustarse. | Pruébalo » |
| initial | Establece la propiedad en su valor por defecto. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |
Errores comunes
spaceyroundson valores reales. Ambos forman parte del estándar y aplican mosaico sin teselas parciales —spaceañade espacios,roundreescala la imagen.no-repeatno redimensiona la imagen. Para que una sola imagen cubra el cuadro, combinano-repeatcon background-size.- La posición define dónde empieza el mosaico. Al repetir,
background-positiondesplaza toda la cuadrícula de teselas, por lo que dos mosaicos pueden verse distintos aunque usen la misma imagen — establece background-position de forma intencional. - También existe la sintaxis de dos valores. Se puede pasar una palabra clave por eje, p. ej.
background-repeat: repeat-x;es equivalente abackground-repeat: repeat no-repeat;.