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:
0 Comentarios