aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/css/background-size/index.html
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:45 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:45 -0500
commit1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch)
tree0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/web/css/background-size/index.html
parent4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff)
downloadtranslated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz
translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2
translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip
initial commit
Diffstat (limited to 'files/es/web/css/background-size/index.html')
-rw-r--r--files/es/web/css/background-size/index.html235
1 files changed, 235 insertions, 0 deletions
diff --git a/files/es/web/css/background-size/index.html b/files/es/web/css/background-size/index.html
new file mode 100644
index 0000000000..827eb7b8e5
--- /dev/null
+++ b/files/es/web/css/background-size/index.html
@@ -0,0 +1,235 @@
+---
+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("&lt;percentage&gt;")}} 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("&lt;length&gt;")}} 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>{{ gecko_callout_heading("8.0") }}</p>
+
+<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> </p>
+
+<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>&lt;degradados&gt;</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>