Breaking

Post Top Ad

Your Ad Spot

miércoles, 13 de noviembre de 2019

background-repeat CSS

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:

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas