Característica background-size en CSS

La propiedad background-clip CSS establece las dimensiones de la imagen de fondo de un elemento. Las dimensiones iniciales de la imagen se pueden dejar, cambiar a nuevas dimensiones o se puede llenar el espacio disponible manteniendo la relación de aspecto.

Tenga en cuenta que los espacios que no están cubiertos por la imagen de fondo se completarán con el valor de la propiedad background-color, y vale la pena señalar que el color de fondo se puede ver si la imagen de fondo contiene transparencia.

Funciones background size en css

Valor inicial	`auto auto`
Aplicado a	Todos los artículos.
Heredable	No
Móvil	Sí
Porcentajes	Sea relativo al área de fondo.
Valor calculado	Como se especifica, pero convertirá longitudes relativas en absolutas.

/* palabras clave */ 
background-size :  cover; 
background-size :  contener;
/* Establecer un valor único, que es el ancho de la imagen y la altura será automáticamente */ 
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;
/* Especifica dos valores, el primero es el ancho y el segundo es el alto */ 
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
/* fondos múltiples */ 
background-size: auto, auto; /* no es `auto auto` */ 
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
/* valores globales */ 
background-size: inherit;
background-size: initial;
background-size: unset;

Ejemplos y aplicaciones

En estos ejemplos, image.png usaremos una imagen con un nombre de 960px de ancho por 640px de alto, que es una relación de aspecto de 3:2, que es más grande que el contenedor (que tiene una altura de 150px). Intentaremos aclarar la mayoría de los casos.

Si dejamos el valor predeterminado para esta propiedad, la imagen mantendrá sus dimensiones originales, es decir, no aparecerá toda en el elemento (porque la altura del elemento es menor que la altura de la imagen):

background-size: auto auto;

Si establecemos el valor para el ancho y el alto de la imagen, se mostrará de acuerdo con las dimensiones especificadas, aunque puede verse distorsionado si estas dimensiones no son consistentes y proporcionales a la relación de aspecto:

background-size: 320px 120px;

También podemos usar porcentajes para especificar las dimensiones de la imagen, pero tenga en cuenta que en la mayoría de los casos esto cambiará la relación de aspecto de la imagen, distorsionándola:

background-size: 100% 60%;

La palabra clave containcambiará el tamaño de la imagen de fondo para hacerla visible en todo el elemento:

background-size: contain;

La palabra reservada cambiará el covertamaño de la imagen de fondo para cubrir toda el área del elemento:

background-size: cover;

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	3.6	9.0	9.5	3,0
Usa imágenes SVG como fondo	44,0	8.0	9.0	31.0	?

Características general

La propiedad se puede especificar background-size de una de las siguientes formas:

Usando la palabra reservada contain o cover.
Especifica solo el valor de ancho, que ajustará automáticamente la altura a auto.
Usando un valor para ancho y alto juntos, el primer valor será el valor de ancho, el segundo valor será el valor de alto y cada uno puede ser una longitud <length>, un porcentaje <percentage> o auto.

Para especificar las dimensiones de varias imágenes de fondo, cada valor se puede separar con una coma.

<bg-size>

contain

Amplíe la imagen tanto como sea posible sin recortar o distorsionar parte de ella.

cover

Amplíe la imagen tanto como sea posible sin distorsionarla, y si la relación de aspecto de la imagen difiere del sujeto, se recortará vertical u horizontalmente para que no queden espacios en blanco.

auto

Amplía la imagen de fondo en la dirección especificada manteniendo la relación de aspecto original.

<length>

Agranda la imagen en una dirección determinada en una cantidad específica. No se permiten valores negativos.

<percentage>

Amplía la imagen en una dirección determinada en un porcentaje específico en relación con el área de fondo, que está determinada por el valor de la propiedad background-origin(y su valor predeterminado es padding-box). Pero si el valor de la propiedad background-attachment es fixed, entonces el valor es relativo a toda la ventana gráfica. No se permiten valores negativos.

Dimensiones reales

El cálculo de los valores de esta propiedad se basa en las dimensiones reales de la imagen (ancho y alto) y la relación de aspecto real (relación de aspecto), y es el siguiente:

Imágenes que tienen dimensiones y relación de aspecto reales, como JPEG, PNG u otra imagen de mapa de bits.
Imágen que no tienen dimensiones reales, pero que tienen una relación de aspecto especificada entre su alto y ancho, como en una imagen SVG u otro formato vectorial.
Imágenes que no tienen dimensiones reales ni proporciones específicas, como degradados en CSS.

Dependiendo de las dimensiones reales y la relación de aspecto, las dimensiones mostradas de la imagen se calcularán de la siguiente manera:

Si se especifican dos valores de propiedad background-size y no lo son auto: la imagen se mostrará en las dimensiones especificadas.
Si el valor de la propiedad background-size es contain o cover: entonces la imagen se mostrará en las dimensiones más grandes posibles dentro (o cubriendo) el área de fondo disponible mientras se mantiene la relación de aspecto, y si la imagen no tiene una relación de aspecto, se mostrará en todo el área de fondo.
Si el valor de la propiedad es background-size igual a auto o auto auto:
- La imagen tiene dimensiones en ambas direcciones, se mostrará en esas dimensiones.
- Si la imagen no tiene dimensiones o relación de aspecto reales, se mostrará en toda el área de fondo.
- Si la imagen no tiene dimensiones reales pero tiene una relación de aspecto, se mostrará como si hubiéramos establecido el valor contain para esta propiedad.
- Una imagen tiene una dimensión en una dirección y tiene una relación de aspecto, se le dará un valor a una de las dimensiones y la otra se calculará en función de la relación de aspecto.
- Pero si una imagen tiene una dimensión en una dirección y no tiene relación de aspecto, entonces se conocerá una de sus dimensiones y la otra será igual al valor de una de las dimensiones del espacio de fondo disponible.
Si uno de los valores de propiedad es background-size igual auto y el otro no auto:
- Si una imagen tiene una relación de aspecto, se ampliará al valor exacto y la otra dimensión se calculará en función de la relación de aspecto.
- Pero si la imagen no tiene una relación de aspecto, se ampliará al valor exacto y la otra dimensión se calculará en función de la dimensión real de la imagen, si existe; de lo contrario, será igual a la dimensión correspondiente de el espacio de fondo disponible.

Nota: Determinar las dimensiones de las imágenes de fondo si son imágenes vectoriales sin dimensiones reales o relación de aspecto no está completamente implementado en todos los navegadores. Tenga cuidado y no confíe en la explicación anterior, y pruebe en varios navegadores hasta que esté seguro de que el valor es aceptable.

Estructura formal

background-size: <bg-size>#;

El valor se puede repetir <bg-size> más de una vez para definir las dimensiones de cada imagen de fondo.

<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain

dónde:

<length-percentage> = <length> | <percentage>

Vea también

Propiedades de la página incautados por la propiedad de acceso directo background: la background-clip, background-color, background-image, background-origin, background-position, background-repeat y background-attachment.