| Sintaxis: | background-repeat: <valor> |
|---|---|
| Valores posibles: | repeat | repeat-x | repeat-y | no-repeat |
| Valor inicial: | repeat |
| Se aplica a: | Todos los elementos |
| Heredado: | No |
La propiedad background-repeat determina como se repite la background image (imagen de fondo) especificada. El valor repeat-x repetirá la imagen horizontalmente mientras que el valor repeat-y repetirá la imagen verticalmente.
Ejemplo:
BODY { background: white url(candybar.gif);
background-repeat: repeat-x }En el ejemplo de arriba, la imagen solo será organizada en mosaico horizontal.
Los autores también pueden usar la foma rápida de la propiedad background, que está mejor soportada que la propiedad background-repeat.
Si un elemento HTML tiene una imagen de fondo ( background-image ), podemos utilizar la propiedad background-repeat para establecer si la imagen se repite o no y de que forma:
.elemento {
/* la imagen no se repite*/
background-image: url(unaImagen.png);
background-repeat: no-repeat;
}La propiedad background-repeat acepta coma valor una de las siguientes palabras clave:
- repeat: la imagen se repite tanto horizontalmente ( en x ) como verticalmente ( en y ).
- repeat-x: la imagen se repite horizontalmente ( en x )
- repeat-y: la imagen se repite verticalmente ( en y )
- no-repeat: la imagen no se repite; aparece una sola vez.
- space: las imágenes se repiten y aparecen enteras y sin cortar. Para esto el CSS está espaciando las imágenes adequadamente.
- round: las imágenes se repiten y aparecen enteras y sin cortar. El CSS las está estirando o comprimiendo las imágenes para que esto pase.
Utilizar dos valores
También podemos utilizar dos valores: en este caso el primer valor establece como repetir la imagen en x; el segundo valor establece como repetir la imagen en y:
.elemento1 {
background-repeat: space repeat;
}
.elemento2 {
background-repeat: repeat round;
}
.elemento3 {
background-repeat: round space;
}Ejemplos
Vea todos estos ejemplos en Codepen:
See the Pen background-repeat*** by Gabi (@enxaneta) on CodePen.
