aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/css/background-repeat/index.html
blob: 674c282252eb60de52ed57137ce1d44343f06ee7 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
---
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
---
<div>{{CSSRef}}</div>

<p>La propiedad de <a href="/en-US/docs/CSS">CSS</a> <strong><code>background-repeat</code></strong> 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.</p>

<p> </p>

<div>{{EmbedInteractiveExample("pages/css/background-repeat.html")}} </div>

<div> </div>

<div class="hidden">
<p>La fuente de este ejemplo interactivo es de GitHub. Si estás interesado en contribuir a los ejemplos interactivos, por favor accee a  <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud para colaborar.</p>
</div>

<p> </p>

<p> </p>

<pre class="brush: css no-line-numbers">/* 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;
</pre>

<div> </div>

<div class="hidden"> </div>

<p> </p>

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

<p>{{cssinfo}}</p>

<h2 id="Sintaxis">Sintaxis</h2>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><code>&lt;repeat-style&gt;</code></dt>
 <dd>Los atributos de valor único son una abreviación de los atributos de doble valor.</dd>
 <dd>
 <table class="standard-table">
  <tbody>
   <tr>
    <td><strong>Valor único</strong></td>
    <td><strong>Doble valor equivalente</strong></td>
   </tr>
   <tr>
    <td><code>repeat-x</code></td>
    <td><code>repeat no-repeat</code></td>
   </tr>
   <tr>
    <td><code>repeat-y</code></td>
    <td><code>no-repeat repeat</code></td>
   </tr>
   <tr>
    <td><code>repeat</code></td>
    <td><code>repeat repeat</code></td>
   </tr>
   <tr>
    <td><code>space</code></td>
    <td><code>space space</code></td>
   </tr>
   <tr>
    <td><code>round</code></td>
    <td><code>round round</code></td>
   </tr>
   <tr>
    <td><code>no-repeat</code></td>
    <td><code>no-repeat no-repeat</code></td>
   </tr>
  </tbody>
 </table>
 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:</dd>
 <dd>
 <table class="standard-table">
  <tbody>
   <tr>
    <td><code>repeat</code></td>
    <td> La imagen se repite hasta cobrir todo el fondo existente. La última imagen debe ser recortada si no encaja.</td>
   </tr>
   <tr>
    <td><code>space</code></td>
    <td>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 {{cssxref("background-position")}} es ignorada a menos que una sola imagen pueda ser desplegada sin recortar. El único caso donde se recorta usando <code>space</code> es cuando no hay suficiente sitio para desplegar una imagen.</td>
   </tr>
   <tr>
    <td><code>round</code></td>
    <td>Como el espacio permitido aumenta, las imágenes repetidas se estrechan (sin dejar huecos) hasta que haya espacio suficiente (espacio restante &gt;= 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.</td>
   </tr>
   <tr>
    <td><code>no-repeat</code></td>
    <td>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 {{cssxref("background-position")}}.</td>
   </tr>
  </tbody>
 </table>
 </dd>
</dl>

<h3 id="Sintaxis_formal">Sintaxis formal</h3>

{{csssyntax}}

<h2 id="Ejemplos">Ejemplos</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;ol&gt;
  &lt;li&gt;no-repeat
    &lt;div class="one"&gt;&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;repeat
    &lt;div class="two"&gt;&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;repeat-x
    &lt;div class="three"&gt;&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;repeat-y
    &lt;div class="four"&gt;&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;space
    &lt;div class="five"&gt;&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;round
    &lt;div class="six"&gt;&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;repeat-x, repeat-y (multiple images)
    &lt;div class="seven"&gt;&lt;/div&gt;
  &lt;/li&gt;
&lt;/ol&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: 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.mozilla.org/static/img/favicon32.png);
  background-repeat: repeat-x,
                     repeat-y;
  height: 144px;
}</pre>

<h3 id="Resultado">Resultado</h3>

<p>En este ejemplo, cada elemento de la lista coincide con un valor diferente de <code>background-repeat</code>.</p>

<p>{{EmbedLiveSample('Examples', 240, 560)}}</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>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 <code>space</code><code>round</code> , y para fondos en elementos en la misma línea mediante la definición precisa de la zona disponible del fondo.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Sin cambios significativos.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Definición inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>

<p class="hidden">La tabla de compatibilidad en esta página está generada a partir de datos esrtucturados. Si quieres contribuir a estos datos, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y mándanos una solicitud.</p>

<p>{{Compat("css.properties.background-repeat")}}</p>

<h2 id="Mira_también">Mira también</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Usando diferentes fondos</a></li>
</ul>