Definición de .background-size aplicado en CSS
La propiedad .background-size en CSS es una de las propiedades de fondo más útiles, y más complejas. Hay muchas variaciones y diferentes sintaxis que puede usar para esta propiedad, todas las cuales tienen diferentes casos de uso. Aquí hay un ejemplo básico:
Caso de empleo : propiedad CSS background-size
Esta propiedad de CSS habitualmente se utiliza de la siguiente manera:
html {
background: url(greatimage.jpg);
background-size: 300px 100px;
}Otro ejemplo más avanzado de .background-size es el siguiente de CODEPEN:
Sintaxis de .background-size en CSS
background-size: auto|length|cover|contain|initial|inherit;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| auto | Valor por defecto. La imagen de fondo se muestra en su tamaño original | |
| longitud | Establece el ancho y el alto de la imagen de fondo. El primer valor establece el ancho, el segundo valor establece la altura. Si solo se da un valor, el segundo se establece en "auto". | |
| porcentaje | Establece el ancho y el alto de la imagen de fondo en porcentaje del elemento principal. El primer valor establece el ancho, el segundo valor establece la altura. Si solo se da un valor, el segundo se establece en "auto" | |
| cubrir | Cambie el tamaño de la imagen de fondo para cubrir todo el contenedor, incluso si tiene que estirar la imagen o cortar un poco uno de los bordes. | |
| contener | Cambie el tamaño de la imagen de fondo para asegurarse de que la imagen sea completamente visible | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .background-size
Los números de la tabla detallan la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| border | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
