background-size

  • Enlace amigable (slug) de la revisión: CSS/background-size
  • Título de la revisión: background-size
  • Id de la revisión: 305857
  • Creada:
  • Creador: aguztinrs
  • ¿Es la revisión actual? No
  • Comentario

Contenido de la revisión

{{ CSSRef() }}

Summary

La propiedad CSS background-size especifica el tamaño de las imágenes de fondo.

Nota: 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 background-size, el valor de esta propiedad se restablece a su valor inicial de la propiedad abreviada.
  • {{ Xref_cssinitial() }} auto auto
  • Se aplica a todos los elementos
  • {{ Xref_cssinherited() }} no
  • Porcentajes ver más abajo
  • Media {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} para <length> el valor absoluto, para otros un porcentaje

Sintaxis

background-size:  background-size[, background-size]*

donde :

background-size
Es una de las palabras claves:
  • contener, que especifica que la imagen de fondo deberia ser escalada lo más grande posible mientras se aseguran ambas dimensiones al mismo tiempo tanto en sus dimensiones son inferiores o iguales a las dimensiones correspondientes al área de posicionamiento de fondo.
  • cubrir, que especifica que la imagen de fondo debe ser escalada lo más pequeño como sea posible asegurando al mismo tiempo tanto en sus dimensiones mayores  o iguales que a las dimensiones correspondientes al área de posicionamiento de fondo.
O bien, uno o dos de los siguientes valores, que denota el tamaño horizontal y el tamaño vertical respectivamente (si sólo es especificado uno, el valor predeterminado para el segundo es auto):
  • Un valor {{ Xref_csspercentage() }} que escala la imagen de fondo en la dimensión correspondiente al porcentaje especificado del área de posicionamiento de fondo, que viene el valor determinado {{ cssxref("background-origin") }}. El área de posicionamiento del fondo es, por defecto, el área que contiene el contenido de la caja y su relleno, el área también se puede cambiar a simplemente el contenido o el área que contiene bordes, el relleno y contenido. Si el fondo de {{cssxref ("background-attachment", "attachment")}} es fija, el área de posicionamiento del fondo es más bien toda el área de la ventana del navegador, sin incluir el área cubierta por las barras de desplazamiento si están presentes. Porcentajes negativos no son permitidos.
  • Un valor {{ Xref_csslength() }} que escala la imagen de fondo a la longitud especificada en la dimensión correspondiente. Longitudes negativas no están permitidos.
  • La palabra clave auto que escala el fondo de la imagen en la dirección correspondiente de modo que su proporción escencial se mantiene.

La interpretación de los valores posibles depende de las dimensiones propias de la imagen (ancho y alto) y proporción propia (relación entre la anchura y altura). Una imagen de mapa de bits siempre tiene dimensiones propias y una proporción propia. Una imagen del vector puede tener ambas dimensiones propias (y por lo tanto debe tener una proporción propia). También puede tener una o ningúna dimensiones propias, y en cualquier caso se podría o no tener una proporción propia. Los gradientes son tratados como imágenes sin dimensiones propias o proporción propia.

{{ gecko_callout_heading("8.0") }}

Este comportamiento ha cambiado en Gecko 8.0 {{geckoRelease ("8.0")}}. Antes de esto, los gradientes se tratan como imágenes sin dimensiones propias, con una proporción propia idéntica al área de posicionamiento de fondo.

 

Las imágenes de fondo generados a partir de elementos con {{ cssxref("-moz-element") }} (que en realidad coincide con un elemento) se tratan actualmente como las imágenes con las dimensiones del elemento, o de la zona de posicionamiento de fondo si el elemento es SVG, con la proporción propia correspondiente.

Nota: Este no es el comportamiento especificado-actualmente, que es que las dimensiones ipropias y proporción deben ser las del elemento en todos los casos.

El tamaño representado de la imagen de fondo se calcula como sigue:

Si ambos componentes de background-size se especifican y no son auto:
La imagen de fondo representa el tamaño especificado.
si el background-size es contain o cover:
La imagen es renderizado, preservando su proporción propia, en el tamaño mayor contenido dentro de, o recubrimiento, el área de posicionamiento de fondo. Si la imagen no tiene una proporción propia, a continuación, se representa en el tamaño de la zona de posicionamiento de fondo.
Si el background-size es auto o auto auto:
Si la imagen tiene dos dimensiones propias, se representa en ese tamaño. Si no tiene dimensiones propias y no proporción propia, se representa en el tamaño del área de posicionamiento de fondo. Si no tiene dimensiones, pero tiene una proporción, se representa como si se hubiera especificado contener en su lugar. Si la imagen tiene una dimensión propia y una proporción, ha rendido en el tamaño determinado por esa única dimensión y la proporción. Si la imagen tiene una dimensión propia pero proporción no, se representa utilizando la dimensión propia y la dimensión correspondiente del área de posicionamiento de fondo.
Si el background-size tiene un auto component and one non-auto component:
If the image has an intrinsic proportion, then render it using the specified dimension, and compute the other dimension from the specified dimension and the intrinsic proportion.  If the image has no intrinsic proportion, use the specified dimension for that dimension.  For the other dimension, use the image's corresponding intrinsic dimension if there is one.  If there is no such intrinsic dimension, use the corresponding dimension of the background positioning area.

Note that background sizing for vector images that lack intrinsic dimensions or proportion is not yet fully implemented in all browsers.  Be careful about relying on the behavior described above, and test in multiple browsers (specifically including versions of Firefox 7 or earlier and Firefox 8 or greater) to be sure different renderings are acceptable.

Examples

This demonstration of background-size: cover and this demonstration of background-size: contain are meant to be opened in new windows so that you can see how contain and cover behave when the background positioning area's dimensions vary. This series of demos of how background-size works and interacts with other background-* properties should pretty much cover the remaining ground in how to use background-size alone and in conjunction with other properties.

Notes

If you are specifying a gradient as background and have specified a background-size to go with it, it's best not to specify a size that uses a single auto component, or is specified using only a width value (for example, background-size: 50%).  Rendering of gradients in such cases changed in Firefox 8, and at present it is generally inconsistent across browsers, which do not all implement rendering in full accordance with the CSS3 background-size specification and with the CSS3 Image Values gradient specification.

.bar {
       width: 50px; height: 100px;
       background-image: gradient(...);

       /* NOT RECOMMENDED */
       background-size: 25px;
       background-size: 50%;
       background-size: auto 50px;
       background-size: auto 50%;

       /* OKAY */
       background-size: 25px 50px;
       background-size: 50% 50%;
}

Note that it's particularly not recommended to use a pixel dimension and an auto dimension with a gradient, because it's impossible to replicate rendering in versions of Firefox prior to 8, and in browsers not implementing Firefox 8's rendering, without knowing the exact size of the element whose background is being specified.

Specifications

Specification Status Comment
{{ SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size') }} {{ Spec2('CSS3 Backgrounds') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0{{ property_prefix("-webkit") }} [2] {{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [4] 9.0 9.5{{ property_prefix("-o") }}
with some bugs [1]
3.0 (522){{ property_prefix("-webkit") }}
but from an older CSS3 draft [2]
   
3.0 {{ CompatGeckoDesktop("2.0") }} 10.0 4.1 (532)
Support for
contain and cover
3.0 {{ CompatGeckoDesktop("1.9.2") }} 9.0 10.0 4.1 (532)
Support for SVG backgrounds {{ CompatUnknown() }} {{ CompatGeckoDesktop("8.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Android Firefox Mobile (Gecko) Windows Phone Opera Mobile Safari Mobile
Basic support {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
2.3
{{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Support for SVG backgrounds {{ CompatUnknown() }} {{ CompatGeckoMobile("8.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

[1] Opera 9.5's computation of the background positioning area is incorrect for fixed backgrounds.  Opera 9.5 also interprets the two-value form as a horizontal scaling factor and, from appearances, a vertical clipping dimension. This has been fixed in Opera 10.

[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.

[3] Konqueror 3.5.4 supports -khtml-background-size.

[4] While this property is new in Gecko 1.9.2 (Firefox 3.6), it is possible to stretch a image fully over the background in Firefox 3.5 by using {{ cssxref("-moz-border-image") }}.

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

See also

Fuente de la revisión

<div>
  {{ CSSRef() }}</div>
<h2 id="Summary">Summary</h2>
<p>La propiedad<code> CSS background-size </code>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="hps gt-trans-draggable">se restablece</span> <span class="hps gt-trans-draggable">a su valor</span> <span class="hps gt-trans-draggable">inicial de la</span> <span class="hps gt-trans-draggable">propiedad abreviada</span><span class="gt-trans-draggable">.</span></span></div>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn><code> auto auto</code></li>
  <li><dfn>Se aplica a</dfn> todos los elementos</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> no</li>
  <li><dfn>Porcentajes</dfn> <span class="short_text" id="result_box" lang="es"><span class="hps alt-edited">ver más abajo</span></span></li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> para &lt;length&gt; el valor absoluto, para otros un porcentaje</li>
</ul>
<h2 id="Syntax">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;"><code>contener, que especifica que la imagen de fondo </code>deberia ser escalada lo más grande posible mientras se aseguran ambas dimensiones<span id="result_box" lang="es"><span class="hps"> al mismo tiempo</span> <span class="hps">tanto en sus</span> <span class="hps">dimensiones</span> <span class="hps">son inferiores o</span> <span class="hps">iguales a las dimensiones</span> <span class="hps">correspondientes al área</span><span class="hps"> de posicionamiento</span> <span class="hps">de fondo.</span></span></li>
      <li style="margin-left: 40px;"><code>cubrir</code>, <span id="result_box" lang="es"><span class="gt-trans-draggable">que especifica que</span> <span class="hps gt-trans-draggable">la imagen de fondo</span> <span class="hps gt-trans-draggable">debe s</span><span class="hps gt-trans-draggable">er escalada</span> lo más pequeño <span class="hps gt-trans-draggable">como sea posible</span> <span class="hps gt-trans-draggable">asegurando al mismo tiempo</span> <span class="hps gt-trans-draggable">tanto en sus</span> <span class="hps gt-trans-draggable">dimensiones</span> <span class="hps gt-trans-draggable">mayores&nbsp;</span> <span class="hps gt-trans-draggable">o</span> <span class="hps gt-trans-draggable">iguales que a las dimensiones</span> <span class="hps gt-trans-draggable">correspondientes al área</span><span class="hps gt-trans-draggable"> de posicionamiento</span> <span class="hps gt-trans-draggable">de fondo.</span></span></li>
    </ul>
    <span id="result_box" lang="es"><span class="hps gt-trans-draggable">O bien,</span> <span class="hps gt-trans-draggable">uno o dos de</span> <span class="hps gt-trans-draggable">los siguientes valores,</span> <span class="hps gt-trans-draggable">que denota el</span> <span class="hps gt-trans-draggable">tamaño</span> <span class="hps gt-trans-draggable">horizontal</span> <span class="hps gt-trans-draggable">y</span> <span class="hps gt-trans-draggable">el tamaño vertical</span> <span class="hps atn gt-trans-draggable">respectivamente (</span><span class="gt-trans-draggable">si sólo es</span> <span class="hps gt-trans-draggable">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 <code>{{ Xref_csspercentage() }}</code> que escala la imagen de fondo en la dimensión correspondiente <span id="result_box" lang="es"><span class="hps gt-trans-draggable">al porcentaje especificado</span> <span class="hps gt-trans-draggable">del área</span><span class="hps gt-trans-draggable"> de posicionamiento</span> <span class="hps gt-trans-draggable">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="hps gt-trans-draggable">El</span> <span class="hps gt-trans-draggable">área de posicionamiento</span> <span class="hps gt-trans-draggable">del fondo es</span><span class="gt-trans-draggable">, por defecto,</span> <span class="hps gt-trans-draggable">el área que contiene</span> <span class="hps gt-trans-draggable">el contenido</span> <span class="hps gt-trans-draggable">de la caja y</span> <span class="hps gt-trans-draggable">su relleno</span><span class="gt-trans-draggable">, el área</span> <span class="hps gt-trans-draggable">también</span> <span class="hps gt-trans-draggable">se puede cambiar a</span> <span class="hps gt-trans-draggable">simplemente el</span> <span class="hps gt-trans-draggable">contenido o</span> <span class="hps gt-trans-draggable">el área que contiene</span> <span class="hps gt-trans-draggable">bordes</span><span class="gt-trans-draggable">, el relleno y</span> <span class="hps gt-trans-draggable">contenido.</span> <span class="hps gt-trans-draggable">Si el fondo</span> <span class="hps gt-trans-draggable">de</span> <span class="hps atn gt-trans-draggable">{</span><span class="atn gt-trans-draggable">{</span><span class="gt-trans-draggable">cssxref</span> <span class="hps atn gt-trans-draggable">(</span><span class="hps atn gt-trans-draggable">"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="hps gt-trans-draggable">es fija, el</span> <span class="hps gt-trans-draggable">área de posicionamiento</span> del <span class="hps gt-trans-draggable">fondo</span> <span class="hps gt-trans-draggable">es más bien</span> <span class="hps gt-trans-draggable">toda el área de</span> <span class="hps gt-trans-draggable">la ventana del navegador</span><span class="gt-trans-draggable">, sin incluir el</span> <span class="hps gt-trans-draggable">área cubierta por</span> <span class="hps gt-trans-draggable">las barras de desplazamiento</span> <span class="hps gt-trans-draggable">si están presentes</span><span class="gt-trans-draggable">.</span> <span class="hps gt-trans-draggable">Porcentajes</span> <span class="hps gt-trans-draggable">negativos no</span> <span class="hps gt-trans-draggable">son permitidos.</span></span></li>
      <li>Un valor <code>{{ Xref_csslength() }}</code> <span id="result_box" lang="es"><span class="hps gt-trans-draggable">que escala</span> <span class="hps gt-trans-draggable">la</span> <span class="hps gt-trans-draggable">imagen de fondo a</span> <span class="hps gt-trans-draggable">la longitud especificada en</span> <span class="hps gt-trans-draggable">la dimensión correspondiente.</span> <span class="hps gt-trans-draggable">Longitudes</span> <span class="hps gt-trans-draggable">negativas no</span> <span class="hps gt-trans-draggable">están permitidos.</span></span></li>
      <li><span id="result_box" lang="es"><span class="hps gt-trans-draggable">La</span> <span class="hps gt-trans-draggable">palabra clave auto</span> <span class="hps gt-trans-draggable">que escala el</span> <span class="hps gt-trans-draggable">fondo de la imagen</span> <span class="hps gt-trans-draggable">en la dirección correspondiente</span> <span class="hps gt-trans-draggable">de modo que su</span> <span class="hps gt-trans-draggable">proporción</span> escencial <span class="hps gt-trans-draggable">se mantiene</span><span class="gt-trans-draggable">.</span></span></li>
    </ul>
  </dd>
</dl>
<p><span id="result_box" lang="es"><span class="hps gt-trans-draggable">La interpretación</span> <span class="hps gt-trans-draggable">de los valores posibles</span> <span class="hps gt-trans-draggable">depende de las dimensiones</span> propias <span class="hps gt-trans-draggable">de la imagen</span> <span class="hps atn gt-trans-draggable">(</span><span class="gt-trans-draggable">ancho y alto)</span> <span class="hps gt-trans-draggable">y proporción</span> <span class="hps atn gt-trans-draggable">propia (</span><span class="gt-trans-draggable">relación entre la anchura</span> <span class="hps gt-trans-draggable">y altura).</span> <span class="hps gt-trans-draggable">Una imagen de</span> <span class="hps gt-trans-draggable">mapa de bits</span> <span class="hps gt-trans-draggable">siempre tiene</span> <span class="hps gt-trans-draggable">dimensiones propias</span> <span class="hps gt-trans-draggable">y una proporción</span> <span class="hps gt-trans-draggable">propia.</span> <span class="hps gt-trans-draggable">Una imagen del vector</span> <span class="hps gt-trans-draggable">puede tener</span> <span class="hps gt-trans-draggable">ambas dimensiones</span> <span class="hps atn gt-trans-draggable">propias (</span><span class="gt-trans-draggable">y por lo tanto</span> <span class="hps gt-trans-draggable">debe tener una</span> <span class="hps gt-trans-draggable">proporción</span> propia<span class="gt-trans-draggable">)</span><span class="gt-trans-draggable">.</span> <span class="hps gt-trans-draggable">También puede tener</span> <span class="hps gt-trans-draggable">una o ningún</span>a <span class="hps gt-trans-draggable">dimensiones propias</span><span class="gt-trans-draggable">,</span> <span class="hps gt-trans-draggable">y</span> <span class="hps gt-trans-draggable">en cualquier caso se</span> <span class="hps gt-trans-draggable">podría o no</span> <span class="hps gt-trans-draggable">tener</span> <span class="hps gt-trans-draggable">una</span> <span class="hps gt-trans-draggable">proporción</span> <span class="hps gt-trans-draggable">propia.</span> <span class="hps gt-trans-draggable">Los gradientes son</span> <span class="hps gt-trans-draggable">tratados como</span> <span class="hps gt-trans-draggable">imágenes</span> <span class="hps gt-trans-draggable">sin</span> <span class="hps gt-trans-draggable">dimensiones propias</span> <span class="hps gt-trans-draggable">o proporción</span> propia<span class="hps gt-trans-draggable">.</span></span></p>
<div class="geckoVersionNote" style="undefined">
  <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="hps atn">{</span><span class="atn">{</span><span>geckoRelease</span> <span class="hps atn">("</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>&nbsp;</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="hps atn">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">Nota: Este</span> <span class="hps">no es el comportamiento</span> <span class="hps">especificado-actualmente</span><span>, que es que</span> <span class="hps">las dimensiones ipropias</span> <span class="hps">y proporción</span> <span class="hps">deben</span> <span class="hps">ser</span> <span class="hps">las del elemento</span> <span class="hps">en todos los casos</span><span>.</span></span></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="hps alt-edited">representa</span> <span class="hps">el 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="hps alt-edited">es renderizado</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 recubrimiento</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">a continuación,</span> <span class="hps">se representa</span> <span class="hps">en</span> <span class="hps">el 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> component and one non-<code>auto</code> component:</dt>
  <dd>
    If the image has an intrinsic proportion, then render it using the specified dimension, and compute the other dimension from the specified dimension and the intrinsic proportion.&nbsp; If the image has no intrinsic proportion, use the specified dimension for that dimension.&nbsp; For the other dimension, use the image's corresponding intrinsic dimension if there is one.&nbsp; If there is no such intrinsic dimension, use the corresponding dimension of the background positioning area.</dd>
</dl>
<p>Note that background sizing for vector images that lack intrinsic dimensions or proportion is not yet fully implemented in all browsers.&nbsp; Be careful about relying on the behavior described above, and test in multiple browsers (specifically including versions of Firefox 7 or earlier and Firefox 8 or greater) to be sure different renderings are acceptable.</p>
<h2 id="Examples">Examples</h2>
<p><a class="external" href="http://whereswalden.com/files/mozilla/background-size/page-cover.html" target="_blank">This demonstration of <code>background-size: cover</code></a> and <a class="external" href="http://whereswalden.com/files/mozilla/background-size/page-contain.html" target="_blank">this demonstration of <code>background-size: contain</code></a> are meant to be opened in new windows so that you can see how <code>contain</code> and <code>cover</code> behave when the background positioning area's dimensions vary. <a class="external" href="http://whereswalden.com/files/mozilla/background-size/more-examples.html">This series of demos of how <code>background-size</code> works and interacts with other <code>background-*</code> properties</a> should pretty much cover the remaining ground in how to use <code>background-size</code> alone and in conjunction with other properties.</p>
<h2 id="Notes">Notes</h2>
<p>If you are specifying a gradient as background and have specified a <code>background-size</code> to go with it, it's best not to specify a size that uses a single auto component, or is specified using only a width value (for example, <code>background-size: 50%</code>).&nbsp; Rendering of gradients in such cases changed in Firefox 8, and at present it is generally inconsistent across browsers, which do not all implement rendering in full accordance with <a class="external" href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size">the CSS3 <code>background-size</code> specification</a> and with <a class="external" href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">the CSS3 Image Values gradient specification</a>.</p>
<pre class="brush: css">
.bar {
       width: 50px; height: 100px;
       background-image: gradient(...);

       /* NOT RECOMMENDED */
       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>Note that it's particularly not recommended to use a pixel dimension and an <code>auto</code> dimension with a gradient, because it's impossible to replicate rendering in versions of Firefox prior to 8, and in browsers not implementing Firefox 8's rendering, without knowing the exact size of the element whose background is being specified.</p>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size') }}</td>
      <td>{{ Spec2('CSS3 Backgrounds') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</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">Basic support</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">&nbsp;</td>
        <td rowspan="2">&nbsp;</td>
      </tr>
      <tr>
        <td>3.0</td>
        <td>{{ CompatGeckoDesktop("2.0") }}</td>
        <td>10.0</td>
        <td>4.1 (532)</td>
      </tr>
      <tr>
        <td>Support for<br />
          <code>contain</code> and <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>Support for 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>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>Windows Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</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>Support for 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>[1] Opera 9.5's computation of the background positioning area is incorrect for fixed backgrounds.&nbsp; Opera 9.5 also interprets the two-value form as a horizontal scaling factor and, from appearances, a vertical <em>clipping</em> dimension. This has been fixed in Opera 10.</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>[3] Konqueror 3.5.4 supports<code> -khtml-background-size</code>.</p>
<p>[4] While this property is new in Gecko 1.9.2 (Firefox 3.6), it is possible to stretch a image fully over the background in Firefox 3.5 by using {{ 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="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
  <li>Background-related CSS properties: {{ CSS_Reference:Background() }}</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>
Revertir a esta revisión