Imágenes de fondo con CSS3 background-size

Ahora tenemos nuevas propiedades CSS3 para tener mayor control para las imágenes de fondo y fondos en general; recordemos que en CSS2 ya podíamos colocar imágenes de fondo, pero en CSS3 tenemos nuevas opciones adicionales para mejorar el manejo de fondos; en esta entrada aprenderemos cuáles son y cómo utilizarlas. ¡Empezamos!

La propiedad background-image

La propiedad background-image ya había sido conocida en el curso de CSS, básicamente sirve para colocar imágenes de fondo, sin embargo recordemos de que trata para posteriormente aprender las nuevas propiedades agregadas.

En los ejemplos demostrativos de esta lección, utilizaremos una imagen necesariamente, a continuación mostraremos la imagen original y su fuente en url("https://cdn.pixabay.com/photo/2017/02/05/00/19/web-design-2038872_960_720.jpg"); a partir de dicha imagen, debes ser capaz de ver su comportamiento de acuerdo a las propiedades y valores que vayamos utilizando.

La propiedad background-image nos permite poner imágenes de fondo a un elemento determinado. Es simple de usar, solo declaramos y en su valor colocamos url(""); dentro de las comillas la ubicación del archivo, ya sea local o URL. Por ejemplo:

<div class="fondoimg"></div>
<style>
div.fondoimg {
  width: 350px;
  height: 200px;
  border: 2px solid red;
  background-image: url("https://cdn.pixabay.com/photo/2017/02/05/00/19/web-design-2038872_960_720.jpg");
  }
</style>

Observa el resultado, por defecto, la imagen de fondo se recorta, al ser más grande que el bloque contenedor, de ahora en adelante aprenderemos a modificar.

La propiedad background-size

La propiedad background-size nos permite especificar las dimensiones del fondo de un elemento; ahora tenemos el control para determinar el tamaño de una imagen de fondo, podemos especificar de varias maneras, de acuerdo al valor que designemos, veamos nuestras opciones.

Te recomendamos leer:  Border-radius: Esquinas redondeadas con CSS3

Valores para background-size

Su valor puede ser numérico con sus respectivas unidades de longitud como px, em, etc. también se pueden expresar en porcentajes (%).

Ejemplo.- en el ejemplo a continuación haremos que las dimensiones de la imagen de fondo del contenedor coincida con las dimensiones del mismo contenedor, de tal manera que la relación de aspecto se ajusta para cubrir todo el área; puedes probar a modificar dichas dimisiones y comprobar tu mismo.

<div class="fondoimg"></div>
<style>
div.fondoimg {
  width: 450px;
  height: 200px;
  border: 2px solid red;
  background-image: url("https://cdn.pixabay.com/photo/2017/02/05/00/19/web-design-2038872_960_720.jpg");
  background-size: 450px 200px;
  }
</style>

También es posible hacer uso de las palabras clave; veamos.

  • Contain.- hace que el fondo se ajuste al contenedor, si el contenedor es más grande que la imagen de fondo, entonces dicha imagen aumenta su tamaño para ajustarse al contenedor, y en caso contrario, disminuye para ajustarse al contenedor, pero no la imagen siempre se muestra completa (sin recorte), aunque no alcance a cubrir por una diferencia de relación de aspecto; por defecto la imagen se repetirá para cubrir espacios vacíos, pero podemos controlar. Mediante la propiedad background-repeat, cuyo valor puede ser no-repeat o repeat.
  • Cover.- en este caso la imagen cubre el contenedor, para ello se escala y si sus dimensiones no guardan relación con las del contendor, entonces se recortará para poder cubrir (aunque sea recortada), el objetivo de la imagen es cubrir y no mostrarse completa.

Ejemplo de background-size: contain;

En el siguiente ejemplo usamos background-size: contain; esto hará que la imagen trate de encajar completamente dentro del fondo, por defecto la imagen se repite en caso quede áreas sin cubrir, pero si usamos la propiedad background-repeat: no-repeat; haremos que no se repita.

<div class="fondoimg"></div>
<style>
div.fondoimg {
  width: 350px;
  height: 200px;
  border: 2px solid red;
  background-image: url("https://cdn.pixabay.com/photo/2017/02/05/00/19/web-design-2038872_960_720.jpg");
  background-size: contain;
  background-repeat: no-repeat; 
  }
</style>

Ejemplo de background-size: cover;

Observa el ejemplo, cuando se establece background-size: cover; la imagen cubre el fondo sin importar si se recorta en caso no coincida la relación de aspecto; observa cómo la altura de la imagen original es recortada para ajustarse al contenedor.

<div class="fondoimg"></div>
<style>
div.fondoimg {
  width: 450px;
  height: 200px;
  border: 2px solid red;
  background-image: url("https://cdn.pixabay.com/photo/2017/02/05/00/19/web-design-2038872_960_720.jpg");
  background-size: cover;
  }
</style>

Perfecto, ahora pasemos a conocer otras propiedades interesantes para controlar fondos con CSS3.

Te recomendamos leer:  Pseudo-clases y pseudo-elementos de CSS3

La propiedad background-clip

La propiedad bacground-clip nos permite especificar hasta donde se extiende el fondo de un elemento, ya sea que estemos trabajando con un color, una imagen, degradado, etc. podemos definir si dicho fondo solo cubre el área de contenido o incluye el área de relleno o extenderse  hasta el borde. Dependerá del valor que tome.

Valores

  • contend-box.- este valor hace el fondo cubra solo el contenido específicamente,
  • padding-box.- con este valor el fondo cubrirá el contenido más el área de relleno del elemento.
  • border-box.-  mediante este valor podemos hacer que el fondo cubra hasta el borde del elemento.

Ejemplos de background-clip

A continuación veamos unos ejemplos para ver cómo funciona la propiedad background-clip y la diferencia entre los resultados producidos por los diversos valores. En los siguientes ejemplos utilizaremos un borde con puntos y de 15px para que se pueda notar las diferencias.

Ejemplo 1.- En el siguiente ejemplo aplicaremos background-clip: content-box; observa cómo el fondo solo se aplica al contenido del elemento, en este caso un párrafo.

<div class="fondoimg"> <p>Elemento de Párrafo dentro de un bloque.</p> </div>
<style>
div.fondoimg {
  width: 300px;
  height: 150px;
  background: red;
  border: 15px dotted blue;
  padding:30px;
  background-clip: content-box;
  }

</style>

Ejemplo 2.- Ahora aplicaremos la declaración background-clip: padding-box; observa cómo el fondo ahora se aplica al contenido y además al relleno del elemento, sin embargo no incluye a los bordes.

<div class="fondoimg"> <p>Elemento de Párrafo dentro de un bloque.</p> </div>
<style>
div.fondoimg {
  width: 300px;
  height: 150px;
  background: red;
  border: 15px dotted blue;
  padding:30px;
  background-clip: padding-box;
  }

</style>

Ejemplo 3.- Ahora apliquemos background-clip: border-box; en este caso el fondo incluirá al borde, es decir el fondo se extiende y el borde también está dentro de la zona con fondo.

<div class="fondoimg"> <p>Elemento de Párrafo dentro de un bloque.</p> </div>
<style>
div.fondoimg {
  width: 300px;
  height: 150px;
  background: red;
  border: 15px dotted blue;
  padding:30px;
  background-clip: border-box;
  }

</style>

Múltiples imágenes de fondo

Veamos cómo colocar varias imágenes de fondo mediante CSS3, pues ahora es totalmente posible; para dicho fin declaramos la propiedad background-image o también es válido simplemente background, luego, mediante url("");  estableceremos las imágenes de fondo, para poner varias, solo separamos con comas (,). Por ejemplo: background: url(""), url(""), url("");

Una vez especificadas las imágenes, ahora establecemos una dimensión en caso de ser necesario; adicionalmente declaramos las propiedades background-position para establecer posiciones, background-repeat para indicar si las imágenes se repiten o no. Veamos ejemplo.

Te recomendamos leer:  La regla @ font-face de CSS3

Ejemplo de varias imágenes de fondo con CSS

En el siguiente ejemplo tenemos un contenedor de 400px de ancho y 300px de altura, estableceremos cuatro imágenes de fondo, las posicionaremos mediante background-position y definiremos sus dimensiones en 200px de ancho y 150px de altura, haremos las imágenes no se repitan y listo. Veamos.

<div class="fondoimg"><p class="text"> Texto de ejemplo. </div>
<style>
div.fondoimg {
  width: 400px;
  height: 300px;
  border: 2px solid blue;
  
  background-image: 
    url("https://cdn.pixabay.com/photo/2020/04/30/15/34/code-5113374__340.jpg"), 
    url("https://cdn.pixabay.com/photo/2018/02/16/10/23/web-3157323__340.jpg"),
    url("https://cdn.pixabay.com/photo/2017/08/10/08/47/code-2620118__340.jpg"),
    url("https://cdn.pixabay.com/photo/2018/11/04/00/02/web-page-3793072__340.png");
  
  background-position: left top, right top, bottom left, bottom right;
  background-size: 200px 150px;
  background-repeat:no-repeat;
  
  }

.text {
  padding:80px;
  font-size:35px;
  text-align: center;
  Color: yellow;  
  }
</style>

[popup_anything id=»5821″]

Rate this post

Deja un comentario

Desarrolladores web