Explorando Backgrounds con Tailwind - Parte 2

¡Saludos, querido lector! Estamos de regreso, con más aprendizaje que involucra al Background y a Tailwind CSS. La última vez aprendiste los conceptos básicos del color de fondo y el clip de fondo.

En el artículo de hoy, continuaremos nuestros estudios explorando la Imagen de Fondo y otros conceptos que giran en torno a ella. Recomendamos leer como base el artículo anterior, que aborda algunos conceptos que utilizaremos aquí, por si hay alguna duda.

Revisando

En el artículo anterior creamos una aplicación que se utilizó para practicar las funcionalidades que Background puede brindarnos. Continuaremos con el mismo ejemplo como base, el cual tiene el siguiente código:

En el container principal, tenemos las siguientes clases:

• w-full - fija el ancho del contenedor al 100% del tamaño de ancho disponible;
• h-screen - establece la altura del contenedor al 100% de la altura del viewport (es decir, 100% de la pantalla disponible para visualización);
• grid - permite la organización de elementos internos en formato de cuadrícula/tabla;
• grid-cols-2 - define que el grid/tabla que estamos creando tendrá dos columnas;
• grid-rows-2 - define que el grid/tabla que estamos creando tendrá dos líneas;
• gap-1 - crea un espacio exterior de 4px entre elementos en el contenedor principal;
• p-1 - crea un espacio interno de 4px para el contenedor principal.
  

Habiendo hecho ese resumen digno de calentar motores, ¡estamos listos para continuar nuestros estudios!

Background Image

Mientras que Background Color permite la inserción de un color en el fondo, Background Image permite utilizar degradados de color e incluso imágenes en el fondo de un elemento. ¿Entendamos mejor cómo implementar ambas posibilidades?

Gradientes Lineares

El primer paso para crear un efecto degradado en un background es informar la dirección en la que ocurrirá su linealidad. Elija una de las clases a continuación para esto:

• bg-gradient-to-t - sólo para la cima;
• bg-gradient-to-tr - hacia arriba y hacia la derecha;
• bg-gradient-to-r - justo a la derecha;
• bg-gradient-to-br - abajo y a la derecha;
• bg-gradient-to-b - justo abajo;
• bg-gradient-to-bl - abajo y a la izquierda;
• bg-gradient-to-l - solo izquierda;
• bg-gradient-to-tl - hacia arriba y hacia la izquierda.
  

Después de elegir la dirección, definimos el color con el que comenzará el degradado insertando el “from-” y una clase de color existente en Tailwind. Luego, definimos el color en el que terminará, insertando el “to-” y una clase de color existente. Así, tenemos la siguiente notación:

bg-gradient-{direção} from-{cor} to-{cor}

¿Qué tal si creamos, para cada elemento que tenemos en nuestro proyecto, una dirección diferente para un efecto degradado con los mismos colores?

También es posible agregar más de dos imágenes dentro de la cuadrícula. Para ello utilizamos el prefijo “via-” y el nombre de la clase que contiene el color. Ve el ejemplo:

Imágenes

Hay dos formas de insertar imágenes en el fondo de un elemento. El primero (que es similar a lo que usamos para agregar un nuevo color que no existía en Tailwind) es crear un objeto llamado backgroundImage dentro del objeto extend desde nuestro Tailwind.config, donde la clave será el nombre de la clase creada y el valor será la dirección donde se encuentra la imagen:

También podemos agregar imágenes directamente al elemento, en lugar de crear una nueva clase en Tailwind.Config:

Al ejecutar cualquiera de los códigos de la Figura 7 u 8, es posible que haya notado que solo una pequeña fracción de cada imagen se mostraba en el fondo del elemento, como en la Figura 9:

Este efecto se produce porque, por defecto, la imagen no se adapta al tamaño del elemento, extrapolando la visualización. Aprenderemos a continuación cómo solucionar este problema.

Background Size

El Background Size conforma el conjunto de clases que definen el tamaño de la imagen de fondo de un elemento. Son ellas:

• bg-auto - muestra la imagen de fondo en su tamaño predeterminado (cuando no usamos una de estas tres clases, este es el comportamiento predeterminado);
• bg-cover - escala la imagen de fondo y la amplía para que ocupe todo el elemento;
• bg-contain - escala la imagen de fondo dentro del elemento sin ampliar sus dimensiones.

En el siguiente ejemplo, usaremos solo dos imágenes para los cuatro contenedores internos, de modo que podamos analizar el comportamiento de las clases “bg-cover” y “bg-contain”:

¿Notaste la diferencia? Mientras que la clase “bg-cover” tenía parte de sí misma para adaptarse a todo el elemento, la clase “bg-contain” no hace esto, adaptando la imagen dentro del elemento sin perder nada. Tenga en cuenta que, al usar “bg-contain”, la imagen se repitió para llenar el espacio que quedaría vacío. Esta es otra característica que podemos definir y la conoceremos a continuación.

Background Repeat

Por medio del Background Repeat Podemos definir si queremos que se repita una imagen de Background y cómo debe hacerlo. Podemos utilizar las siguientes clases para esto:

• bg-repeat - habilita la repetición de una imagen en el fondo de un elemento (repetir la imagen de fondo es el comportamiento predeterminado);
• bg-no-repeat - desactiva la repetición de una imagen en el fondo de un elemento;
• bg-repeat-x - establece la repetición solo en el eje x;
• bg-repeat-y - establece la repetición sólo en el eje y;
• bg-repeat-round -cuanto más aumente el espacio, más imágenes repetidas se adaptarán hasta que quede espacio para agregar otra; al agregar uno nuevo, los demás se compactan para dejar espacio para él;
• bg-repeat-space - permite repetir la imagen tanto como sea posible y sin recortar, distribuyéndose uniformemente el espacio en blanco entre las imágenes repetidas.
  

En el siguiente ejemplo, utilizamos la funcionalidad de repetición y no repetición en los contenedores internos:

Background Position

Con Background Position, definimos desde qué posición se muestra una imagen en el fondo de un elemento. Las posibilidades son:

• bg-bottom - la visualización será desde la parte inferior de la imagen;
• bg-center - se mostrará el centro de la imagen;
• bg-left - la imagen se mostrará desde su lado izquierdo;
• bg-left-bottom - la visualización será desde la parte inferior e izquierda de la imagen;
• bg-left-top - la visualización será desde la parte superior e izquierda de la imagen;
• bg-right - la visualización comienza desde la parte derecha de la imagen;
• bg-right-bottom -la visualización será desde la parte inferior y derecha de la imagen;
• bg-right-top - la visualización será desde la parte superior y derecha de la imagen;
• bg-top - la imagen se mostrará desde la parte superior de la imagen.

Para practicar y verificar el comportamiento de algunas de estas clases, usaremos la misma imagen sobre dos elementos, pero con diferentes posiciones. La clase “bg-cover” se utilizará para que las imágenes se amplíen y parte de ellas no aparezcan, precisamente para que podamos elegir nosotros mismos qué parte se mostrará:

Background Origin

El Background Origin funciona igual que el Background Clips, que cubrimos en el artículo anterior, pero uno se aplica solo a imágenes/degradados y el otro solo a backgrounds con un solo color de fondo. Es decir: el Background Origin delimita el área donde se aplicará la imagen de fondo a un elemento. Para ello utilizamos una de tres posibilidades:

• bg-origin-border - extiende el área de visualización de la imagen de fondo insertada o el degradado hasta el borde existente;
• bg-origin-padding - extiende el área de visualización de la imagen de fondo o degradado insertada hasta el espacio interno, pero sin llegar al borde;
• bg-origin-content - extiende el área de visualización de la imagen de fondo o degradado insertada hasta el contenido del elemento en cuestión, pero sin alcanzar el espaciado interno.

Como ejemplo, usaremos en los primeros tres contenedores internos una de las clases presentadas para manipular el Background Origin, aplicando la clase “bg-no-repeat”para que los espacios no se llenen sin background y podamos notar la diferencia entre cada uno de ellos:

Background Attachment

Por último, tenemos el Background Attachment, lo que nos permite controlar cómo se comporta una imagen de fondo al desplazarse. Hay tres clases en las que podemos definir este comportamiento:

• bg-fixed - la imagen de fondo permanece fija en relación con la ventana gráfica, sin moverse hacia arriba o hacia abajo según el desplazamiento;
• bg-local - la imagen de fondo se muestra según el contenedor y la ventana gráfica (es el comportamiento de visualización predeterminado);
• bg-scroll - la imagen de fondo se muestra según la viewport, pero no en relación con contêiner.
  

Observa el código siguiente:

En el código de la Figura 18 creamos dos contenedores dentro de un contenedor principal, donde cada uno tiene el mismo contenido, con la diferencia de que uno usa la clase “bg-local” y el otro la clase “bg-fixed”. Tenga en cuenta la diferencia de comportamiento entre las imágenes de fondo:

Consideraciones finales

Hemos llegado al final de un gran viaje, donde detallamos el Fondo CSS aplicado a Tailwind. Después de leer los dos artículos que involucran este concepto, aprendiste a utilizar las principales funcionalidades aplicadas a este framework, pudiendo hacer cosas increíbles a partir de ahora. ¿Qué tal si dejas aquí en los comentarios qué concepto te gustó más dentro del Fondo? ¡Esperamos ansiosamente su respuesta!

Si te ha parecido interesante este artículo, te gustaría aclarar alguna duda o simplemente quieres intercambiar ideas sobre estos y otros temas, también puedes contactar conmigo, ya sea vía correo electrónico bruno.cabral.silva2018@gmail.com o en mi perfil do LinkedIn.

¡Saludos!