Una vez tengamos asignada una imagen de fondo con la propiedad de css background-image tenemos otra que es de las más usadas y versátiles: background-size. ¿Quieres saber que podemos hacer con ella?
¿Vemos un ejemplo de background size?
See the Pen CSS Background-image Size by Juan Antonio Muñoz Castro (@colchonero82) on CodePen.
background-size length/Porcentaje ➡️ En primer lugar vamos a ver como modificarlo manualmente
En el embed de Codepen vemos en primer lugar un ejemplo de backgroud-size manual, es decir, especificamos a mano el tamaño que queremos que tenga la imagen de fondo.
Para el ejemplo hemos usado un tamaño de 200×75 píxeles pero también podríamos haber puesto porcentajes para que el fondo se ajuste al ancho, alto o lo que nos interese.
background-size:auto; ➡️ Ajustamos en modo por defecto
El valor auto, que es el valor por defecto en la propiedad background-size, coge por defecto el tamaño original de la imagen y lo mostrará en la ubicación que indiquemos mediante background-position.
background-size:cover; ➡️ Cubrir todo el fondo con la imágen
La propiedad cover es sin duda una de las más usadas a la hora de establecer una imagen como fondo de una etiqueta en CSS. Debido a esto hemos dedicado un post especifico para hablar al detalle de ella.
¿Quieres ver todas las posibilidades de la opción cover? Click aqui
background-size:contain; ➡️ ajustar al fondo pero mostrando siempre la imágen completa
Mediante la opción contain lo que conseguimos es ajustar la imagen al contenedor pero siempre mostrando la imagen al completo.
El principal inconveniente de esta propiedad es que, a no ser que le demos un uso que nos venga bien puntualmente, si el contenedor no tiene el mismo tamaño que la imagen el resultado puede ser que parte de la caja o contenedor se quedará sin imagen de fondo.
background-size:initial; ➡️ reiniciamos el valor de la propiedad a su estado por defecto
Pongámonos en el caso que previamente, por las razones que sean (una plantilla con valores por defecto, ajustes globales, etc), tenemos la propiedad size con un valor de “contain” por ejemplo.
Si nosotros quisiéramos reiniciar a los valores por defecto de esta propiedad bastaría con poner el valor initial para que el valor por defecto vuelva a ser auto.
background-size:inherit; ➡️ Valor del campo padre
Al igual que el caso anterior reiniciábamos al valor por defecto, en esta ocasión con el valor inherit le asignamos el valor que tenga el campo padre.
Ya conoces todas las posibilidades que te da la ¡ propiedad size para poner imágenes de fondo ! ¿Quieres saber más sobre las imágenes de fondo en css?
