diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
commit | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch) | |
tree | 0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/web/css/background-size/index.html | |
parent | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff) | |
download | translated-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.html | 235 |
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("<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>{{ 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><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> |