
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 contain
cambiará el tamaño de la imagen de fondo para hacerla visible en todo el elemento:
background-size: contain;
La palabra reservada cambiará el cover
tamañ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
ocover
. - 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>
oauto
.
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 sonauto
: la imagen se mostrará en las dimensiones especificadas. - Si el valor de la propiedad
background-size
escontain
ocover
: 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 aauto
oauto 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
igualauto
y el otro noauto
:- 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
: labackground-clip
,background-color
,background-image
,background-origin
,background-position
,background-repeat
ybackground-attachment
.
- Introducción al Lenguaje de Programación CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características overflow-wrap en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características direction en CSS
- Características line-height en CSS
- Características font-style en CSS
- Características font-weight en CSS
- Características font-stretch en CSS
- Características font en CSS
- Características font-size-adjust en CSS
- Características font-size en CSS
- Características font-kerning en CSS
- Características font-family en CSS
- Características order en CSS
- Características justify-content en CSS
- Características flex-wrap en CSS
- Características flex-shrink en CSS
- Características flex-grow en CSS
- Características flex-flow en CSS
- Características flex-direction en CSS
- Características flex-basis en CSS
- Características flex en CSS
- Características align-self en CSS
- Características align-items en CSS
- Características align-content en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características margin-top en CSS
- Características padding-top en CSS
- Características margin-right en CSS