Diseñar un banner atractivo es uno de los primeros pasos para dar forma visual a un sitio web. Aquí se explica cómo lograrlo usando Tailwind CSS, imágenes de fondo y clases utilitarias que permiten un resultado profesional y adaptable a cualquier dispositivo.
¿Cómo estructurar el HTML del banner?
Antes de aplicar estilos, es fundamental definir la estructura semántica del contenido. Se utiliza la etiqueta <main> para indicar al navegador que se trata del contenido principal del sitio [0:10]. Dentro de ella, se crea un <div> que servirá como contenedor del banner.
Para la imagen, en lugar de usar una etiqueta <img>, se aplica la propiedad background image directamente en el estilo del <div>. Esto permite mayor control sobre cómo se muestra la imagen, especialmente en diseños responsivos.
html
<main>
<div style="background-image: url('URL_DE_LA_IMAGEN');">
</div>
</main>
La imagen se obtiene de Unsplash [0:30], un recurso gratuito de fotografías de alta calidad. Se copia la dirección de la imagen seleccionada y se pega dentro de la función url() del estilo inline.
¿Qué clases de Tailwind controlan el fondo y la altura?
Al insertar la imagen, inicialmente no se ve correctamente porque el <div> no tiene altura definida. La clase h-64 asigna una altura fija al contenedor [1:00], haciendo visible parte de la imagen.
¿Cuál es la diferencia entre bg-cover y bg-contain?
- bg-cover: escala la imagen para cubrir todo el contenedor, recortando lo que sobra. Es ideal cuando se quiere llenar el espacio sin dejar huecos [1:10].
- bg-contain: muestra la imagen completa sin recortarla, pero puede generar repeticiones si el contenedor es más grande que la imagen [1:20].
Para evitar la repetición con contain, se puede usar bg-no-repeat, aunque en este caso se opta por bg-cover porque ofrece un resultado más limpio.
¿Cómo posicionar la parte visible de la imagen?
Con bg-center la imagen se centra dentro del contenedor [1:40]. Otra opción es bg-bottom, que muestra la parte inferior de la imagen. En este ejemplo se elige bg-bottom porque la composición visual resulta más atractiva [1:50].
¿Cómo personalizar la altura en tailwind.config?
Las clases de altura en Tailwind llegan hasta h-64 por defecto, lo que equivale a 16 rem. Cada unidad de spacing corresponde a 0.25 rem [2:20]. Para crear alturas mayores, se extiende la configuración en el archivo tailwind.config.js.
javascript
// tailwind.config.js
module.exports = {
theme: {
extend: {
height: {
'80': '20rem',
'100': '25rem',
}
}
}
}
Aquí se agregan las clases h-80 (80 × 0.25 = 20 rem) y h-100 (100 × 0.25 = 25 rem) [3:30]. Después de guardar, es necesario que el procesador de CSS esté activo con npm run watch para que los cambios surtan efecto [2:50].
¿Cómo hacer el banner responsivo con breakpoints?
El diseño responsivo en Tailwind se logra usando prefijos de breakpoint como md: para pantallas medianas en adelante [3:50]. La estrategia es:
- En móvil: usar
h-56 para que la imagen no ocupe demasiado espacio vertical [3:55].
- En escritorio: aplicar
md:h-100 junto con bg-center para aprovechar mejor el área visible [4:10].
html
<div class="h-56 md:h-100 bg-cover bg-center"
style="background-image: url('URL_DE_LA_IMAGEN');">
</div>
Esta combinación garantiza que el banner se adapte de forma elegante tanto en teléfonos como en pantallas grandes.
El flujo completo va desde la estructura semántica con <main>, pasando por la selección de imagen en Unsplash, hasta la personalización de alturas y el uso de breakpoints responsivos. ¿Has probado extender otras propiedades en tu configuración de Tailwind? Comparte tu experiencia.
