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
|
---
title: background-size
slug: Web/CSS/background-size
tags:
- CSS
- CSS Background
- CSS Property
- Reference
translation_of: Web/CSS/background-size
---
<div>{{ CSSRef() }}</div>
<h2 id="Resumen">Resumen</h2>
<p>La propiedad CSS <strong><code>background-size</code></strong> especifica el tamaño de las imágenes de fondo.</p>
<div class="note"><strong>Nota:</strong> Si el valor de esta propiedad no se encuentra en una propiedad abreviada {{ cssxref("background") }} esta es aplicada para los elementos después de la propiedad CSS <code>background-size</code>, el valor de esta propiedad <span id="result_box" lang="es"><span class="gt-trans-draggable hps">se restablece</span> <span class="gt-trans-draggable hps">a su valor</span> <span class="gt-trans-draggable hps">inicial de la</span> <span class="gt-trans-draggable hps">propiedad abreviada</span><span class="gt-trans-draggable">.</span></span></div>
<p>{{cssinfo}}</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="syntaxbox">background-size: <em>background-size</em>[ <em>background-size</em>]*
</pre>
<p>donde <strong>: </strong></p>
<dl>
<dt><em><strong>background-size</strong></em></dt>
<dd style="margin-left: 40px;">Es una de las palabras claves:</dd>
<dd style="margin-left: 40px;">
<ul>
<li style="margin-left: 40px;"><strong><code>contain</code></strong><br>
<span id="result_box" lang="es"><span class="hps">Escala la imagen al mayor tamaño posible sin recortarla ni estirarla.</span></span></li>
<li style="margin-left: 40px;"><strong><code>cover</code></strong><br>
<span id="result_box" lang="es"><span class="gt-trans-draggable">Escala la imagen al mayor tamaño posible sin estirarla. Si las proporciones de la imagen difieren de las del elemento, es recortada vertical u horizontalmente para que no quede un espacio vacío.</span></span></li>
</ul>
<span id="result_box" lang="es"><span class="gt-trans-draggable hps">O bien,</span> <span class="gt-trans-draggable hps">uno o dos de</span> <span class="gt-trans-draggable hps">los siguientes valores,</span> <span class="gt-trans-draggable hps">que denota el</span> <span class="gt-trans-draggable hps">tamaño</span> <span class="gt-trans-draggable hps">horizontal</span> <span class="gt-trans-draggable hps">y</span> <span class="gt-trans-draggable hps">el tamaño vertical</span> <span class="atn gt-trans-draggable hps">respectivamente (</span><span class="gt-trans-draggable">si sólo es</span> <span class="gt-trans-draggable hps">especificado uno</span><span class="gt-trans-draggable">, el valor predeterminado</span> para el segundo es auto<span class="gt-trans-draggable">):</span></span>
<ul>
<li>Un valor {{cssxref("<percentage>")}} que escala la imagen de fondo en la dimensión correspondiente <span id="result_box" lang="es"><span class="gt-trans-draggable hps">al porcentaje especificado</span> <span class="gt-trans-draggable hps">del área</span><span class="gt-trans-draggable hps"> de posicionamiento</span> <span class="gt-trans-draggable hps">de fondo</span><span class="gt-trans-draggable">,</span></span> que viene el valor determinado {{ cssxref("background-origin") }}. <span id="result_box" lang="es"><span class="gt-trans-draggable hps">El</span> <span class="gt-trans-draggable hps">área de posicionamiento</span> <span class="gt-trans-draggable hps">del fondo es</span><span class="gt-trans-draggable">, por defecto,</span> <span class="gt-trans-draggable hps">el área que contiene</span> <span class="gt-trans-draggable hps">el contenido</span> <span class="gt-trans-draggable hps">de la caja y</span> <span class="gt-trans-draggable hps">su relleno</span><span class="gt-trans-draggable">, el área</span> <span class="gt-trans-draggable hps">también</span> <span class="gt-trans-draggable hps">se puede cambiar a</span> <span class="gt-trans-draggable hps">simplemente el</span> <span class="gt-trans-draggable hps">contenido o</span> <span class="gt-trans-draggable hps">el área que contiene</span> <span class="gt-trans-draggable hps">bordes</span><span class="gt-trans-draggable">, el relleno y</span> <span class="gt-trans-draggable hps">contenido.</span> <span class="gt-trans-draggable hps">Si el fondo</span> <span class="gt-trans-draggable hps">de</span> <span class="atn gt-trans-draggable hps">{</span><span class="atn gt-trans-draggable">{</span><span class="gt-trans-draggable">cssxref</span> <span class="atn gt-trans-draggable hps">(</span><span class="atn gt-trans-draggable hps">"background-</span><span class="gt-trans-draggable">attachment"</span><span class="gt-trans-draggable">, "attachment</span><span class="gt-trans-draggable">")}</span><span class="gt-trans-draggable">}</span> <span class="gt-trans-draggable hps">es fija, el</span> <span class="gt-trans-draggable hps">área de posicionamiento</span> del <span class="gt-trans-draggable hps">fondo</span> <span class="gt-trans-draggable hps">es más bien</span> <span class="gt-trans-draggable hps">toda el área de</span> <span class="gt-trans-draggable hps">la ventana del navegador</span><span class="gt-trans-draggable">, sin incluir el</span> <span class="gt-trans-draggable hps">área cubierta por</span> <span class="gt-trans-draggable hps">las barras de desplazamiento</span> <span class="gt-trans-draggable hps">si están presentes</span><span class="gt-trans-draggable">.</span> <span class="gt-trans-draggable hps">Porcentajes</span> <span class="gt-trans-draggable hps">negativos no</span> <span class="gt-trans-draggable hps">son permitidos.</span></span></li>
<li>Un valor {{cssxref("<length>")}} q<span lang="es"><span class="gt-trans-draggable hps">ue escala</span> <span class="gt-trans-draggable hps">la</span> <span class="gt-trans-draggable hps">imagen de fondo a</span> <span class="gt-trans-draggable hps">la longitud especificada en</span> <span class="gt-trans-draggable hps">la dimensión correspondiente.</span> <span class="gt-trans-draggable hps">Longitudes</span> <span class="gt-trans-draggable hps">negativas no</span> <span class="gt-trans-draggable hps">están permitidos.</span></span></li>
<li><span id="result_box" lang="es"><span class="gt-trans-draggable hps">La</span> <span class="gt-trans-draggable hps">palabra clave auto</span> <span class="gt-trans-draggable hps">que escala el</span> <span class="gt-trans-draggable hps">fondo de la imagen</span> <span class="gt-trans-draggable hps">en la dirección correspondiente</span> <span class="gt-trans-draggable hps">de modo que su</span> <span class="gt-trans-draggable hps">proporción</span> escencial <span class="gt-trans-draggable hps">se mantiene</span><span class="gt-trans-draggable">.</span></span></li>
</ul>
</dd>
</dl>
<p><span id="result_box" lang="es"><span class="gt-trans-draggable hps">La interpretación</span> <span class="gt-trans-draggable hps">de los valores posibles</span> <span class="gt-trans-draggable hps">depende de las dimensiones</span> propias <span class="gt-trans-draggable hps">de la imagen</span> <span class="atn gt-trans-draggable hps">(</span><span class="gt-trans-draggable">ancho y alto)</span> <span class="gt-trans-draggable hps">y proporción</span> <span class="atn gt-trans-draggable hps">propia (</span><span class="gt-trans-draggable">relación entre la anchura</span> <span class="gt-trans-draggable hps">y altura).</span> <span class="gt-trans-draggable hps">Una imagen de</span> <span class="gt-trans-draggable hps">mapa de bits</span> <span class="gt-trans-draggable hps">siempre tiene</span> <span class="gt-trans-draggable hps">dimensiones propias</span> <span class="gt-trans-draggable hps">y una proporción</span> <span class="gt-trans-draggable hps">propia.</span> <span class="gt-trans-draggable hps">Una imagen del vector</span> <span class="gt-trans-draggable hps">puede tener</span> <span class="gt-trans-draggable hps">ambas dimensiones</span> <span class="atn gt-trans-draggable hps">propias (</span><span class="gt-trans-draggable">y por lo tanto</span> <span class="gt-trans-draggable hps">debe tener una</span> <span class="gt-trans-draggable hps">proporción</span> propia<span class="gt-trans-draggable">)</span><span class="gt-trans-draggable">.</span> <span class="gt-trans-draggable hps">También puede tener</span> <span class="gt-trans-draggable hps">una o ningún</span>a <span class="gt-trans-draggable hps">dimensiones propias</span><span class="gt-trans-draggable">,</span> <span class="gt-trans-draggable hps">y</span> <span class="gt-trans-draggable hps">en cualquier caso se</span> <span class="gt-trans-draggable hps">podría o no</span> <span class="gt-trans-draggable hps">tener</span> <span class="gt-trans-draggable hps">una</span> <span class="gt-trans-draggable hps">proporción</span> <span class="gt-trans-draggable hps">propia.</span> <span class="gt-trans-draggable hps">Los gradientes son</span> <span class="gt-trans-draggable hps">tratados como</span> <span class="gt-trans-draggable hps">imágenes</span> <span class="gt-trans-draggable hps">sin</span> <span class="gt-trans-draggable hps">dimensiones propias</span> <span class="gt-trans-draggable hps">o proporción</span> propia<span class="gt-trans-draggable hps">.</span></span></p>
<div class="geckoVersionNote" style="">
<p><span id="result_box" lang="es"><span class="hps">Este comportamiento ha cambiado</span> <span class="hps">en</span> <span class="hps">Gecko</span> <span class="hps">8.0</span> <span class="atn hps">{</span><span class="atn">{</span><span>geckoRelease</span> <span class="atn hps">("</span><span>8.0"</span><span>)}</span><span>}.</span> <span class="hps">Antes de esto,</span> <span class="hps">los gradientes se</span> <span class="hps">tratan como</span> <span class="hps">imágenes</span> <span class="hps">sin</span> <span class="hps">dimensiones propias</span><span>,</span> <span class="hps">con</span> <span class="hps">una</span> <span class="hps">proporción</span> propi<span class="hps">a</span> <span class="hps">idéntica al área</span><span class="hps"> de posicionamiento</span> <span class="hps">de fondo.</span></span></p>
</div>
<p><span id="result_box" lang="es"><span class="hps">Las imágenes de fondo</span> <span class="hps">generados a partir de</span> <span class="hps">elementos</span> <span class="atn hps">con </span></span>{{ cssxref("-moz-element") }}<span id="result_box" lang="es"> <span class="hps">(que en realidad</span> <span class="hps">coincide con</span> <span class="hps">un elemento)</span> <span class="hps">se tratan actualmente</span> <span class="hps">como</span> <span class="hps">las imágenes con</span> <span class="hps">las</span> <span class="hps">dimensiones del elemento</span><span>, o</span> <span class="hps">de</span> <span class="hps">la</span> <span class="hps">zona de posicionamiento</span> <span class="hps">de fondo si</span> <span class="hps">el elemento es</span> <span class="hps">SVG</span><span>,</span> <span class="hps">con</span> <span class="hps">la proporción</span> <span class="hps">propia</span> <span class="hps">correspondiente</span><span>.</span></span></p>
<div class="note"><span id="result_box" lang="es"><span class="hps"><strong>Nota</strong>: El comportamiento de los <code><degradados></code> cambió en Gecko 8.0 </span></span>{{geckoRelease("8.0")}}. Anteriormente se trataban como imágenes sin dimensiones intrínsecas, pero con proporciones intrínsecas idénticas a las del área de posicionamiento del fondo.</div>
<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">tamaño representado</span> <span class="hps">de</span> <span class="hps">la imagen de fondo</span> <span class="hps">se calcula como</span> <span class="hps">sigue:</span></span></p>
<dl>
<dt><span id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">ambos componentes de</span> </span><code>background-size</code><span id="result_box" lang="es"> <span class="hps">se especifican</span> <span class="hps">y no son</span> <span class="hps">auto</span></span>:</dt>
<dd><span id="result_box" lang="es"><span class="hps">La imagen de fondo</span> <span class="alt-edited hps">representa</span> a<span class="hps">l tamaño</span> <span class="hps">especificado.</span></span></dd>
<dt>si el <code>background-size</code> es <code>contain</code> o <code>cover</code>:</dt>
<dd><span id="result_box" lang="es"><span class="hps">La imagen</span> <span class="alt-edited hps">es renderizada</span>, <span class="hps">preservando su</span> <span class="hps">proporción</span> propia<span>,</span> <span class="hps">en el tamaño mayor</span> <span class="hps">contenido dentro de</span><span>, o cubriendo</span><span>,</span> <span class="hps">el</span> <span class="hps">área de posicionamiento</span> <span class="hps">de fondo.</span> <span class="hps">Si</span> <span class="hps">la</span> <span class="hps">imagen no tiene una</span> <span class="hps">proporción</span> <span class="hps">propia</span><span>,</span> <span class="hps">entonces</span> <span class="hps">se representa</span> a<span class="hps">l tamaño de la</span> <span class="hps">zona de posicionamiento</span> <span class="hps">de fondo.</span></span></dd>
<dt>Si el <code>background-size</code> es <code>auto</code> o <code>auto auto</code>:</dt>
<dd><span id="result_box" lang="es"><span class="hps">Si la imagen tiene</span> <span class="hps">dos</span> <span class="hps">dimensiones propias</span><span>, se representa</span> <span class="hps">en ese tamaño.</span> <span class="hps">Si</span> <span class="hps">no tiene dimensiones</span> propi<span class="hps">as y</span> <span class="hps">no</span> <span class="hps">proporción</span> <span class="hps">propia</span><span>, se representa</span> <span class="hps">en</span> <span class="hps">el tamaño del área</span><span class="hps"> de posicionamiento</span> <span class="hps">de fondo.</span> <span class="hps">Si no tiene</span> <span class="hps">dimensiones</span><span>, pero tiene una</span> <span class="hps">proporción</span><span>, se</span> <span class="hps">representa como</span> <span class="hps">si</span> <span class="hps">se hubiera especificado</span> <span class="hps">contener</span> <span class="hps">en su lugar.</span> <span class="hps">Si la imagen tiene</span> <span class="hps">una</span> <span class="hps">dimensión</span> <span class="hps">propia y</span> <span class="hps">una</span> <span class="hps">proporción</span><span>, ha</span> <span class="hps">rendido en</span> <span class="hps">el tamaño determinado</span> <span class="hps">por esa</span> <span class="hps">única dimensión</span> <span class="hps">y la proporción</span><span>.</span> <span class="hps">Si la imagen tiene</span> <span class="hps">una dimensión</span> propia <span class="hps">pero</span> <span class="hps">proporción</span> <span class="hps">no, se</span> <span class="hps">representa utilizando</span> <span class="hps">la dimensión propia</span> <span class="hps">y</span> <span class="hps">la dimensión correspondiente del área</span><span class="hps"> de posicionamiento</span> <span class="hps">de fondo.</span></span></dd>
<dt>Si el background-size tiene un <code>auto</code> componente y un non-<code>auto</code> componente:</dt>
<dd><span id="result_box" lang="es"><span class="hps">Si la imagen tiene</span> <span class="hps">una</span> <span class="hps">proporción</span> propia<span class="hps">, entonces</span> <span class="hps">hacen</span> <span class="hps">uso de la dimensión</span> <span class="hps">especificada</span><span>,</span> <span class="hps">y</span> <span class="hps">calcula</span> <span class="hps">la otra dimensión</span> <span class="hps">de</span> <span class="hps">la dimensión especificada</span> <span class="hps">y</span> <span class="hps">la proporción</span> propia<span class="hps">.</span> <span class="hps">Si la</span> <span class="hps">imagen no tiene una</span> <span class="hps">parte</span> propia<span>, utilice</span> <span class="hps">la dimensión especificada</span> <span class="hps">para esa dimensión.</span> <span class="hps">Por</span> <span class="hps">la otra dimensión</span><span>, utilice la</span> <span class="hps">imagen</span> <span class="hps">de</span> <span class="hps">dimensión propia</span> <span class="hps">correspondiente, si</span> <span class="hps">es que existe.</span> <span class="hps">Si</span> <span class="hps">no hay ninguna dimensión</span> propia <span class="hps">tal, el uso</span> <span class="hps">de la</span> <span class="hps">dimensión correspondiente del </span><span class="hps">área de posicionamiento</span> <span class="hps">de fondo.</span></span></dd>
</dl>
<p><span id="result_box" lang="es"><span class="hps">Tenga en cuenta</span> <span class="hps">que los antecedentes</span> <span class="hps">de tamaño de</span> <span class="hps">imágenes</span> <span class="hps">vectoriales que</span> <span class="hps">carecen de</span> <span class="hps">dimensiones propias</span> <span class="hps">o la proporción</span> <span class="hps">no</span> <span class="hps">se</span> <span class="hps">ha aplicado plenamente</span> <span class="hps">en</span> <span class="hps">todos los navegadores.</span> <span class="hps">Tenga cuidado con</span> <span class="hps">confiar en el</span> <span class="hps">comportamiento descrito anteriormente</span><span>, y la prueba</span> <span class="hps">en varios navegadores</span> <span class="atn hps">(</span><span>incluyendo específicamente</span> <span class="hps">las versiones de</span> <span class="hps">Firefox 7</span> <span class="hps">o anterior y</span> <span class="hps">Firefox 8</span> <span class="hps">o superior</span><span>) para asegurarse de</span> <span class="hps">versiones</span> <span class="hps">diferentes</span> <span class="hps">son aceptables.</span></span></p>
<h2 id="Ejemplos">Ejemplos</h2>
<p>Esta demostración de backround-size: cover y esta demostración de background-size: contain están destinados a ser abiertos en nuevas ventanas para que pueda ver <span id="result_box" lang="es"><span class="gt-trans-draggable hps">cómo</span> contain<span class="gt-trans-draggable hps"> y</span> cover <span class="gt-trans-draggable hps">comportarse</span> <span class="gt-trans-draggable hps">cuando las dimensiones</span> <span class="gt-trans-draggable hps">de</span>l área <span class="gt-trans-draggable hps">de posicionamiento</span> <span class="gt-trans-draggable hps">de</span> <span class="gt-trans-draggable hps">fondo</span> <span class="gt-trans-draggable hps">variar.</span> <span class="gt-trans-draggable hps">Esta serie de</span> <span class="gt-trans-draggable hps">demostraciones de</span> <span class="gt-trans-draggable hps">cómo</span> <span class="gt-trans-draggable hps">funciona</span> <span class="gt-trans-draggable hps">el background-size</span> <span class="gt-trans-draggable hps">e interactúa</span> <span class="gt-trans-draggable hps">con otras</span> <span class="gt-trans-draggable hps">propiedades de</span> background-<span class="gt-trans-draggable hps">*</span> </span><span id="result_box" lang="es"><span class="hps">debe</span> <span class="hps">casi</span> <span class="hps">cubrir el suelo</span> <span class="hps">restante</span> <span class="hps">en el uso de</span> <span class="hps">background-size</span> <span class="hps">solo y</span> <span class="hps">en combinación</span> <span class="hps">con otras propiedades.</span></span></p>
<h2 id="Notas">Notas</h2>
<p>Si especifíca un degradado como fondo y tiene especificado un background-size para ir con ella, es mejor no especificar un tamaño que utilice un solo componente auto, o es especificado usando solo un valor de anchura (por ejemplo, background-size: 50%). Renderizado de gradientes en tales casos cambiaron en Firefox 8, y en la actualidad es generalmente inconsistente en todos los navegadores, que no todo implementa el renderizadando en total conformidad con la especificación CSS3 background-size y con la especificación de valores de imagen CSS3 gradiente.</p>
<pre class="brush: css">.bar {
width: 50px; height: 100px;
background-image: gradient(...);
/* NO RECOMENDADO */
background-size: 25px;
background-size: 50%;
background-size: auto 50px;
background-size: auto 50%;
/* OKAY */
background-size: 25px 50px;
background-size: 50% 50%;
}
</pre>
<p>Tenga en cuenta que particularmente no es recomendado usar una dimensión de píxeles y una dimensión auto con degradado, porque es imposible replicar el renderizado en las versiones de Firefox anteriores a 8, y en los navegadores que no implementaron el renderizado de Firefox 8,<span class="long_text" id="result_box" lang="es"><span class="gt-trans-draggable"> sin saber</span> <span class="gt-trans-draggable hps">el tamaño exacto</span> <span class="gt-trans-draggable hps">del elemento cuyo</span> <span class="gt-trans-draggable hps">fondo</span> <span class="gt-trans-draggable hps">se ha especificado</span><span class="gt-trans-draggable">.</span></span></p>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estados</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size') }}</td>
<td>{{ Spec2('CSS3 Backgrounds') }}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de navegador</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th colspan="3">Safari (WebKit)</th>
</tr>
<tr>
<td rowspan="2">Soporte Básico</td>
<td>1.0{{ property_prefix("-webkit") }} [2]</td>
<td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [4]</td>
<td rowspan="2">9.0</td>
<td>9.5{{ property_prefix("-o") }}<br>
with some bugs [1]</td>
<td>3.0 (522){{ property_prefix("-webkit") }}<br>
but from an older CSS3 draft [2]</td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td>3.0</td>
<td>{{ CompatGeckoDesktop("2.0") }}</td>
<td>10.0</td>
<td>4.1 (532)</td>
</tr>
<tr>
<td>Soporte para<br>
<code>contain</code> y <code>cover</code></td>
<td>3.0</td>
<td>{{ CompatGeckoDesktop("1.9.2") }}</td>
<td>9.0</td>
<td>10.0</td>
<td colspan="3">4.1 (532)</td>
</tr>
<tr>
<td>Soporte para SVG backgrounds</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoDesktop("8.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td colspan="3">{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>Windows Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte Básico</td>
<td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}<br>
2.3</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td>Soporte para SVG backgrounds</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoMobile("8.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<p><span class="long_text" id="result_box" lang="es"><span class="hps">[1</span><span>]</span> <span class="hps">Opera 9.5</span> <span class="atn hps">'</span><span>s calcula</span><span class="hps"> el área de</span> <span class="hps">posicionamiento</span> de background <span class="hps">es incorrecto</span> <span class="hps">para los background</span> <span class="hps">fijos.</span> <span class="hps">Opera</span> <span class="hps">9,5</span> <span class="hps">también</span> <span class="hps">interpreta la forma</span> <span class="hps">de dos valores</span> <span class="hps">como</span> <span class="hps">un factor de escala</span> <span class="hps">horizontal</span> <span class="hps">y</span><span>,</span> <span class="hps">por las apariencias,</span> <span class="hps">una dimensión</span> <span class="hps">de recorte vertical</span><span>.</span> <span class="hps">Esto ha</span> <span class="hps">sido arreglado en</span> <span class="hps">Opera 10.</span></span></p>
<p>[2] WebKit-based browsers originally implemented an older draft of CSS3<code> background-size </code>in which an omitted second value is treated as <em>duplicating</em> the first value; this draft does not include the<code> contain </code>or<code> cover </code>keywords.</p>
<p><span class="long_text" id="result_box"><span style="background-color: #ffffff;" title="[2] WebKit-based browsers originally implemented an older draft of CSS3 background-size in which an omitted second value is treated as duplicating the first value; this draft does not include the contain or cover keywords.">[2] Los navegadores basados en WebKit- originalmente implementado un proyecto anterior de background-size CSS3 en que se trata de un valor omitido segundo como duplicar el primer valor; este proyecto no incluye el cover o contain palabras claves.</span></span></p>
<p>[3] Konqueror 3.5.4 <code>soportan -khtml-background-size</code>.</p>
<p>[4] <span class="long_text" id="result_box" lang="es"><span>Si bien</span> <span class="hps">esta</span> <span class="hps">propiedad es nueva en</span> </span> Gecko 1.9.2 (Firefox 3.6), <span class="long_text" id="result_box" lang="es"><span class="gt-trans-draggable">es</span> <span class="gt-trans-draggable hps">posible estirar</span> <span class="gt-trans-draggable hps">una imagen completamente</span> <span class="gt-trans-draggable hps">sobre el fondo</span> <span class="gt-trans-draggable hps">en Firefox</span> <span class="gt-trans-draggable hps">3.5 usando</span></span> {{ cssxref("-moz-border-image") }}.</p>
<pre class="brush:css">.foo {
background-image: url(bg-image.png);
-webkit-background-size: 100% 100%; /* Safari 3.0 */
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
-moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */
}</pre>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
<li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="en-US/docs/CSS/Multiple backgrounds">Multiple backgrounds</a></li>
<li><a href="/en-US/docs/CSS/Scaling_background_images" title="/en-US/docs/CSS/Scaling_background_images">Scaling background images</a></li>
</ul>
|
