Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedad de repetición de fondo
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada repetición de fondo Con sintaxis y ejemplos.
describir
La propiedad background-repeat de CSS define si la imagen de fondo de un elemento se repite (es decir, en mosaico).
sintaxis
La sintaxis de la propiedad CSS de repetición de fondo es:
background-repeat: value;
parámetro o parámetro
valor
Define si la imagen de fondo se repite. Puede ser uno de los siguientes:
valor | describir |
---|---|
repetir | La imagen se repite horizontal y verticalmente div { imagen de fondo: url(“logotipo.png”); repetición de fondo: repetir; } |
repetir -x | La imagen se repite horizontalmente div { imagen de fondo: url(“logotipo.png”); repetición de fondo: repetir-x; } |
repetir -y | La imagen se repite verticalmente div { imagen de fondo: url(“logotipo.png”); repetición de fondo: repetir-y; } |
no repetir | La imagen no se repite div {imagen de fondo: url(“logo.png”); repetición de fondo: sin repetición; } |
ronda | La imagen se repite varias veces.Si no se logra un ajuste exacto, la imagen se volverá a escalar div { imagen de fondo: url (“logo.png”); repetición de fondo: círculo; } |
espacio | La imagen se repite muchas veces y encaja perfectamente.Si no se logra una coincidencia exacta, se muestra un espacio en blanco entre las imágenes div { imagen de fondo: url(“logo.png”); repetición de fondo: espacio; } |
heredar | El elemento heredará la repetición de fondo de su elemento principal div { imagen de fondo: url(“logo.png”); repetición de fondo: heredar; } |
notas
- Al configurar la imagen de fondo, también debe configurar la propiedad CSS background-color en caso de que la imagen no esté disponible.
Compatibilidad del navegador
La propiedad CSS background-repeat tiene soporte básico para los siguientes navegadores:
- Aleación de cromo
- Firefox (Geco)
- Internet Explorer (IE) (IE 9+ para espacios/círculos)
- Opera (Opera 10.5+ para espacio/redondo)
- Safari (WebKit)
ejemplo
Discutiremos la propiedad background-repeat a continuación, explorando ejemplos de cómo usarla en CSS.
div { background-image: url("/images/gradient.png");
background-repeat: repeat; }
En este ejemplo de repetición de fondo de CSS, usamos el archivo degradado.png como
También es aconsejable establecer el color de fondo al configurar la imagen de fondo, en caso de que la imagen no esté disponible. Modifiquemos nuestro ejemplo para agregar un color de fondo negro.
div { background-color: black;
background-image: url("/images/gradient.png");
background-repeat: repeat; }
Ahora, si la imagen de degradado.png no está disponible,