background-repeat

facebook-svg gplus-svg twitter-svg

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.