CSS Background Image Size

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?

👇 👇 👇 ¡ sigue leyendo ! 👇 👇 👇
CSS image background-size

¿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?

👇 👇 👇 ¡ No te pierdas estos post ! 👇 👇 👇

Otras propiedades para el background

CSS Background

https://css-tricks.com/snippets/css/transparent-background-images/

No hay una propiedad CSS background-opacity, pero puede simularla insertando un pseudo elemento con una opacidad regular del tamaño exacto del elemento detrás de él. div { width: 200px; height: 200px; display: block; position: relative; } div::after { content: “”; background: url(image.jpg); opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index:

Ver más »
CSS Background

Formas de imagen de fondo

La siguiente es una publicación invitada de Joseph Markus. Joseph tenía un diseño particular que necesitaba implementar para el sitio web Britain on Film de BFI. Como un verdadero desarrollador de front-end, Joseph tomó en cuenta los requisitos y pasó por muchas opciones diferentes para encontrar el mejor enfoque. Él nos guiará a través de

Ver más »
CSS Background

Nueva encuesta: el caso del desorden gigante

Suponga que ha diseñado una página web y utiliza una imagen de fondo de página completa. Realmente te gusta el aspecto del sitio con esta imagen de fondo. El se parece increíble. Pero la imagen es 350k. Ha decidido que aunque sabe que es pesado, vale la pena. Pero luego empiezas a pensar en dispositivos

Ver más »
Ir arriba