Característica background-repeat en CSS

La propiedad background-position en CSS define cómo se repetirá la imagen de fondo. La imagen de fondo se puede repetir en el eje horizontal, en el eje vertical o en ambos ejes, y es posible que nunca se repita.

De forma predeterminada, la imagen se recortará a las dimensiones del elemento, pero se puede cambiar de tamaño para que quepa dentro de ella (usando el valor round) o distribuida uniformemente a lo largo de los bordes del elemento (usando el valor space).

Funciones background-repeat en css

Valor inicial	`repeat`
Aplicado a	Todos los artículos.
Heredable	No
Móvil	No
Valor calculado	Una lista con más de un elemento, cada elemento consta de dos palabras reservadas y cada palabra reservada representa el método de repetición en esa dirección.

/* especificar un valor único */ 
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* horizontal | vertical */ 
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

/* valores globales */ 
background-repeat: inherit;
background-repeat: initial;
background-repeat: unset;

Ejemplos y aplicaciones

La siguiente regla duplicará la imagen de fondo (especificada por la propiedad background-image) solo en el eje horizontal (x):

background-repeat: repeat-x;

La siguiente regla hará que la imagen de fondo se duplique solo background-image en el eje vertical (y):

background-repeat: repeat-y;

Esta regla hará que la imagen de fondo no se duplique background-image, es decir, se mostrará solo una vez:

background-repeat: no-repeat;

El siguiente selector establecerá una imagen de fondo en el elemento, lo <p> centrará (usando la propiedad background-position) e iterará solo en el eje vertical (y):

p {
  background-image: url(image.png);
  background-position: center;
  background-repeat: repeat-y;
}

El siguiente selector establecerá dos imágenes de fondo en el elemento <div>, iterará la primera imagen en el eje (x) y mostrará la segunda imagen sin iterar:

div {
  background-image: url(image-1.png), url(image-2.png);
  background-repeat: repeat-x, no-repeat;
}

En el siguiente especificador, la imagen se repetirá para cualquier número necesario para cubrir toda el área de fondo, y la última imagen se recortará si no se expande.

div {
  background-image: url(image.png);
  background-repeat: space;
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	1.0	4.0	3,5	1.0
Múltiples fondos, capacidad para establecer dos valores.	1.0	13,0	9.0	10,5	1.3
Las palabras reservadas ronda y espacio	Soportado	49,0	9.0	10,5	Soportado

Estructura general

<repeat-style>

Si usamos un valor, habríamos usado una forma corta en lugar de especificar dos valores:

El valor es repeat-x equivalente repeat no-repeat
El valor es repeat-y equivalente no-repeat repeat
El valor es repeat equivalente repeat repeat
El valor es space equivalente space space
El valor es round equivalente round round
El valor es no-repeat equivalente no-repeat no-repeat

Cuando se especifican dos valores, el primer valor representará cómo se repetirá la imagen en el eje horizontal y el segundo valor representará cómo se repetirá la imagen en el eje vertical. Explicaremos cómo se repetirá cada uno de los valores posibles afectará el comportamiento de la iteración en cada dirección.

repeat

La imagen se repetirá tantas veces como sea necesario para cubrir toda el área de fondo, y la última imagen se recortará si no se expande.

space

La imagen se repetirá tantas como sea necesario para cubrir toda el área de fondo sin ser recortada, y la primera y la última imagen se fijarán a ambos lados del elemento, y los espacios se distribuirán equitativamente entre las imágenes.

La propiedad se ignorará a background-position menos que se pueda ver una sola imagen sin recortarla. El único caso en el que la imagen de fondo se recortará cuando space se utilice el valor es que el área de fondo del elemento no puede mostrar una sola imagen.

round

Esta propiedad le permite cambiar las dimensiones de la imagen de fondo para que no quede ningún espacio, hasta que quede un espacio vacío que se ajuste nuevamente a la imagen (es decir, el espacio restante sea mayor o igual a la mitad del ancho de la imagen). Cuando se agrega una nueva imagen, las dimensiones de todas las imágenes se reducirán para adaptarse a la nueva imagen.

Ejemplo de aclaración: Supongamos que tenemos una imagen cuyas dimensiones originales son 260 píxeles, y se repite 3 veces. Quizás aumente sus dimensiones a 300 píxeles de ancho para no dejar un espacio, y cuando agregue una nueva imagen, sus dimensiones se reducirán a 225 píxeles para dar cabida a una nueva imagen.

no-repeat

La imagen no se duplicará (y la imagen no tiene que cubrir toda el área de fondo), y la posición de la imagen de fondo (que no se duplicará) se establecerá usando el background-position.

Estructura

background-position: <repeat-style>#;

El valor se puede repetir más de una vez para representar cómo se repite cada imagen de fondo y estará separado por una coma.

<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}

Vea también

Propiedades de la página incautados por la propiedad de acceso directo background: la background-clip, background-color, background-image, background-origin, background-position, background-size y background-attachment.