From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/background-repeat/index.html | 250 ++++++++++++++++++++++++++ 1 file changed, 250 insertions(+) create mode 100644 files/es/web/css/background-repeat/index.html (limited to 'files/es/web/css/background-repeat') diff --git a/files/es/web/css/background-repeat/index.html b/files/es/web/css/background-repeat/index.html new file mode 100644 index 0000000000..660f22df27 --- /dev/null +++ b/files/es/web/css/background-repeat/index.html @@ -0,0 +1,250 @@ +--- +title: background-repeat +slug: Web/CSS/background-repeat +tags: + - CSS + - 'CSS:Referencias' + - Fondos CSS + - Propiedades de CSS + - Referências + - Todas_las_Categorías +translation_of: Web/CSS/background-repeat +--- +
{{CSSRef}}
+ +

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.

+ +

 

+ +
{{EmbedInteractiveExample("pages/css/background-repeat.html")}} 
+ +
 
+ + + +

 

+ +

 

+ +
/* 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).

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
<repeat-style>
+
Los atributos de valor único son una abreviación de los atributos de doble valor.
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valor únicoDoble valor equivalente
repeat-xrepeat no-repeat
repeat-yno-repeat repeat
repeatrepeat repeat
spacespace space
roundround round
no-repeatno-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.
spaceLa 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 {{cssxref("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.
roundComo 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-repeatLa 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 {{cssxref("background-position")}}.
+
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+
+ +

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.

+ +

{{EmbedLiveSample('Examples', 240, 560)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}{{Spec2('CSS3 Backgrounds')}}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 space y round , y para fondos en elementos en la misma línea mediante la definición precisa de la zona disponible del fondo.
{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}{{Spec2('CSS2.1')}}Sin cambios significativos.
{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}{{Spec2('CSS1')}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.background-repeat")}}

+ +

Mira también

+ + -- cgit v1.2.3-54-g00ecf