Definición de .background-repeat en CSS
Si se especifica una propiedad de imagen de fondo, la propiedad .background-repeat en CSS define si (y cómo) se repetirá. Aquí hay un ejemplo:
Ejemplo de uso de la propiedad background-repeat
Esta propiedad de CSS normalmente se emplea de la siguiente manera:
html {
background-image: url(logo.png);
background-repeat: repeat-x;
}Otro ejemplo más avanzado de .background-repeat es el siguiente de CODEPEN:
Sintaxis de .background-repeat en CSS
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| repetir | La imagen de fondo se repite tanto vertical como horizontalmente. La última imagen se recortará si no encaja. esto es por defecto | |
| repetir-x | La imagen de fondo se repite solo horizontalmente | |
| repetir-y | La imagen de fondo se repite solo verticalmente. | |
| sin repetición | La imagen de fondo no se repite. La imagen solo se mostrará una vez | |
| espacio | La imagen de fondo se repite tanto como sea posible sin recorte. La primera y la última imagen se fijan a ambos lados del elemento y los espacios en blanco se distribuyen uniformemente entre las imágenes. | |
| redondo | La imagen de fondo se repite y se aplasta o estira para llenar el espacio (sin espacios) | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .background-repeat
Los números de la tabla especifican la primera versión del navegador que es absolutamente compatible con la propiedad.
Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| background-size | 4.0 1.0 -webkit- | 9.0 | 4.0 3.6 -moz- | 4.1 3.0 -webkit- | 10.5 10.0 -o- |
