La propiedad de CSS background-repeat define como se repiten los fondos del documento. Un fondo de imagen puede ser repetido sobre el eje horizontal, el eje vertical, ambos ejes, o no estar repetido.

 

 
 

 

 

/* One-value syntax */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

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

/* Global values */
background-repeat: inherit;
background-repeat: initial;
background-repeat: unset;
 

 

Por defecto, las imágenes repetidas son ajustadas al tamaño del elemento, pero pueden ser reescaladas para ajustarse (usando round) o igualmente distribuido desde un extremo a otro (usando space).

Valor inicialrepeat
Applies toall elements. It also applies to ::first-letter and ::first-line.
Heredableno
Mediavisual
Valor calculadoa list, each item consisting of two keywords, one per dimension
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

Valores

<repeat-style>
Los atributos de valor único son una abreviación de los atributos de doble valor.
Valor único Doble valor equivalente
repeat-x repeat no-repeat
repeat-y no-repeat repeat
repeat repeat repeat
space space space
round round round
no-repeat no-repeat no-repeat
En los atributos de doble valor, el primer valor se comporta usando la repetición horizontal y el segundo valor representa el comportamiento de repetición vertical. Aquí se explica como cada opción funciona con cada dirección:
repeat  La imagen se repite hasta cobrir todo el fondo existente. La última imagen debe ser recortada si no encaja.
space La imagen se repite lo máximo posible sin recortarse. La primera y última imagen son fijadas a cada lado del elemento, y el espacio blanco es distribuido igualmente entre las imágenes. La propiedad background-position es ignorada a menos que una sola imagen pueda ser desplegada sin recortar. El único caso donde se recorta usando space es cuando no hay suficiente sitio para desplegar una imagen.
round Como el espacio permitido aumenta, las imágenes repetidas se estrechan (sin dejar huecos) hasta que haya espacio suficiente (espacio restante >= la mitad del ancho de la imagen) para que otra sea añadida. Cuando la próxima imagen es añadida, todas las demás son comprimidas al espacio disponible. Ejemplo: Una imagen con un ancho inicial de 260px, se repite 3 veces, debería estirarse hasta que el tamaño sea de 300px, luego otra imagen debe ser añadida. Luego deberían comprimirse hasta los 225px.
no-repeat La imagen no se repite (y por lo tanto el area coloreada de la imagen de fondo no debe ser rellenada completamente). La posición del fondo no repetido ies definida por la propiedad de CSS background-position.

Sintaxis formal

<repeat-style>#

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

Ejemplos

HTML

<ol>
  <li>no-repeat
    <div class="one"></div>
  </li>
  <li>repeat
    <div class="two"></div>
  </li>
  <li>repeat-x
    <div class="three"></div>
  </li>
  <li>repeat-y
    <div class="four"></div>
  </li>
  <li>space
    <div class="five"></div>
  </li>
  <li>round
    <div class="six"></div>
  </li>
  <li>repeat-x, repeat-y (multiple images)
    <div class="seven"></div>
  </li>
</ol>

CSS

/* Shared for all DIVS in example */
ol,
li {
  margin: 0;
  padding: 0;
}
li {
  margin-bottom: 12px;
}
div {
    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
    width: 160px;
    height: 70px;
}

/* Background repeats */
.one {
  background-repeat: no-repeat;
}
.two {
  background-repeat: repeat;
}
.three {
  background-repeat: repeat-x;
}
.four {
  background-repeat: repeat-y;
}
.five {
  background-repeat: space;
}
.six {
  background-repeat: round;
}

/* Multiple images */
.seven {
  background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
                     url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
  background-repeat: repeat-x,
                     repeat-y;
  height: 144px;
}

Resultado

En este ejemplo, cada elemento de la lista coincide con un valor diferente de background-repeat.

Especificaciones

Especificación Estado Comentario
CSS Backgrounds and Borders Module Level 3
La definición de 'background-repeat' en esta especificación.
Candidate Recommendation Añade soporte para diferentes imágenes de fondo, el atributo de doble valor equivalente permite un comportamiento de repetición diferente para las direcciones verticales y horizontales, las palabras clave spaceround , y para fondos en elementos en la misma línea mediante la definición precisa de la zona disponible del fondo.
CSS Level 2 (Revision 1)
La definición de 'background-repeat' en esta especificación.
Recommendation Sin cambios significativos.
CSS Level 1
La definición de 'background-repeat' en esta especificación.
Recommendation Definición inicial.

Compatibilidad en navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 1IE Soporte completo 4Opera Soporte completo 3.5Safari Soporte completo 1WebView Android ? Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android ? Safari iOS ? Samsung Internet Android ?
Multiple backgroundsChrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 3.6IE Soporte completo 9Opera Soporte completo 10.5Safari Soporte completo 1.3WebView Android ? Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android ? Safari iOS ? Samsung Internet Android ?
Two-value syntax (different values for x & y directions)Chrome Soporte completo SiEdge Soporte completo 12Firefox Soporte completo 13IE Soporte completo 9Opera Soporte completo SiSafari Soporte completo SiWebView Android ? Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 14Opera Android ? Safari iOS ? Samsung Internet Android ?
round and space keywordsChrome Soporte completo SiEdge Soporte completo 12Firefox Soporte completo 49IE Soporte completo 9Opera Soporte completo 10.5Safari Soporte completo SiWebView Android ? Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 49Opera Android ? Safari iOS ? Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Compatibility unknown  
Compatibility unknown

Mira también

Etiquetas y colaboradores del documento

Colaboradores en esta página: itxuixdev, SphinxKnight, teoli, Nathymig
Última actualización por: itxuixdev,