CSS Background Image Cover

la propiedad Cover del background-image en css consiste en hacer que una imagen se muestre ajustada al contenedor padre. Sin duda una de las propiedades más populares a la hora de poner una foto como fondo de cualquier contenedor html.

css background cover

¿Vemos un ejemplo de la propiedad Cover para una imágen de fondo?

See the Pen mdeWyRa by Juan Antonio Muñoz Castro (@colchonero82) on CodePen.

En la pestaña HTML de CodePen se puede ver un simple DIV con identificador “principal”. Seguidamente, antes de entrar a ver con detalle las opciones background image, size y position, en la pestaña CSS se puede ver que se le asigna a la caja “principal” un ancho del 100% y una altura de 70vh, cogiendo en este caso el 70% de la altura de la ventana de CodePen.

Ya tenemos clara la base del código, vamos ahora a explicar las propiedades background usadas.

background-image: url();

Aquí no tiene mucha cosa que explicar, mediante la propiedad URL hemos introducido una url que lleva a una imagen de esta web, indicando de esta forma que dicha imagen sea fondo del div para el ejemplo que estamos viendo.

background-size: cover;

Aquí tenemos la propiedad css background-image cover que motiva este post. Mendiante esta simple línea de código estamos indicando que la imagen que se carga en la línea anterior debe ajustarse al contenedor del ejemplo. Con esto nos encontramos un problema, cuando ajustamos la imagen habitualmente no se nos muestra la parte de la misma que nos interesa teniendo que modificar donde queremos hacer el “foco” en la imágen.

Para solventar el problema del foco sobre la imagen tenemos la siguiente propiedad

background-position: center;

En el ejemplo que nos ocupa en este artículo nos vasta con poner la posición “center” y se quedará centrado tanto horizontal como verticalmente. 

Para poder alinear a la izquierda, derecha arriba o abajo se podrían usar algunas de las siguientes conbinaciones:

  • background-position: left top -> Nos alinearía el fondo en la esquina superior izquierda.

  • background-position: right bottom -> Nos alinearía el fondo en la esquina inferior derecha.

  • background-position: center top -> Nos alinearía el fondo en la parte superior centrado.

¡Se acabo! ya sabes como hacer que una imagen se ajuste completamente a cualquier etiqueta HTML y ajustarlo a la zona que nos interese de la imagen.

si quieres saber más te recomiendo leer algunos de nuestros post sobre css y las imágenes de fondo.

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