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