Fondos e imágenes

Imágenes de fondo

Tailwind CSS proporciona un conjunto de clases de utilidad para trabajar con imágenes de fondo en elementos HTML. Estas clases permiten controlar el tamaño, la posición, la repetición y el comportamiento de desplazamiento del fondo sin necesidad de escribir CSS personalizado.

Tamaño del fondo

El tamaño de la imagen de fondo se controla mediante tres clases principales:

• bg-cover: escala la imagen para que cubra todo el elemento, recortando si es necesario.
• bg-contain: escala la imagen para que se muestre completa dentro del elemento, pudiendo dejar espacio sin cubrir.
• bg-auto: mantiene el tamaño original de la imagen sin aplicar escala.

<div class="bg-cover bg-center h-64 w-full"
     style="background-image: url('https://picsum.photos/800/400')">
  <!-- La imagen cubre todo el contenedor -->
</div>

<div class="bg-contain bg-center bg-no-repeat h-64 w-full bg-gray-100"
     style="background-image: url('https://picsum.photos/800/400')">
  <!-- La imagen se muestra completa sin recorte -->
</div>

La clase bg-cover es la opción más habitual para secciones hero y cabeceras porque garantiza que no queden huecos visibles en el contenedor.

Posición del fondo

Para controlar desde qué punto se ancla la imagen de fondo, Tailwind ofrece las siguientes clases de posicionamiento:

• bg-center: centra la imagen horizontal y verticalmente.
• bg-top, bg-bottom: alinea la imagen al borde superior o inferior.
• bg-left, bg-right: alinea la imagen al borde izquierdo o derecho.
• bg-left-top, bg-left-bottom, bg-right-top, bg-right-bottom: combinaciones de esquina.

<div class="bg-cover bg-top h-64 w-full"
     style="background-image: url('https://picsum.photos/800/400')">
  <!-- La imagen se ancla desde el borde superior -->
</div>

<div class="bg-cover bg-right-bottom h-64 w-full"
     style="background-image: url('https://picsum.photos/800/400')">
  <!-- La imagen se ancla desde la esquina inferior derecha -->
</div>

Repetición del fondo

Por defecto, las imágenes de fondo se repiten en mosaico. Para modificar este comportamiento se utilizan las clases de repetición:

• bg-repeat: repite la imagen en ambos ejes (por defecto).
• bg-no-repeat: desactiva la repetición.
• bg-repeat-x: repite la imagen solo en el eje horizontal.
• bg-repeat-y: repite la imagen solo en el eje vertical.
• bg-repeat-round: repite ajustando el tamaño para evitar recortes.
• bg-repeat-space: repite distribuyendo espacio entre copias.

<div class="bg-repeat-x bg-bottom h-32 border border-gray-300"
     style="background-image: url('https://picsum.photos/100/100')">
  <!-- Patrón repetido solo en horizontal -->
</div>

Attachment del fondo

La propiedad background-attachment determina si la imagen de fondo se desplaza junto con el contenido o permanece fija:

• bg-fixed: la imagen permanece fija respecto a la ventana del navegador, creando un efecto parallax.
• bg-scroll: la imagen se desplaza junto con el elemento (comportamiento por defecto).
• bg-local: la imagen se desplaza junto con el contenido del elemento, útil en contenedores con scroll interno.

<div class="bg-fixed bg-cover bg-center h-screen"
     style="background-image: url('https://picsum.photos/1200/800')">
  <div class="flex items-center justify-center h-full">
    <h1 class="text-4xl font-bold text-white bg-black/50 p-6 rounded">
      Efecto parallax con bg-fixed
    </h1>
  </div>
</div>

El efecto bg-fixed resulta especialmente llamativo en secciones de página completa donde el usuario hace scroll y la imagen de fondo permanece estática.

Recorte y origen del fondo

Tailwind CSS incluye clases para controlar el área de recorte y el punto de origen de las imágenes de fondo. Estas utilidades permiten efectos avanzados como texto con relleno de gradiente.

Background clip

La propiedad background-clip define hasta dónde se extiende el fondo del elemento:

• bg-clip-border: el fondo se extiende hasta el borde exterior del elemento (incluye el borde).
• bg-clip-padding: el fondo se recorta en el borde del padding (no se muestra bajo el borde).
• bg-clip-content: el fondo se recorta al área del contenido.
• bg-clip-text: el fondo se recorta a la forma del texto, ideal para crear texto con gradiente.

<div class="bg-clip-border p-6 border-4 border-dashed border-blue-500 bg-blue-100">
  Fondo visible hasta el borde
</div>

<div class="bg-clip-padding p-6 border-4 border-dashed border-blue-500 bg-blue-100">
  Fondo recortado en el padding
</div>

<div class="bg-clip-content p-6 border-4 border-dashed border-blue-500 bg-blue-100">
  Fondo solo en el área de contenido
</div>

El caso más interesante es bg-clip-text, que permite aplicar un gradiente como relleno del texto:

<h2 class="text-6xl font-extrabold bg-clip-text text-transparent
           bg-gradient-to-r from-purple-500 to-pink-500">
  Texto con gradiente
</h2>

En este ejemplo, text-transparent hace que el color del texto sea transparente y bg-clip-text recorta el gradiente de fondo a la forma de las letras, produciendo un efecto visual donde el texto muestra el degradado.

Background origin

La propiedad background-origin define desde qué área comienza a posicionarse la imagen de fondo:

• bg-origin-border: la imagen comienza desde el borde del elemento.
• bg-origin-padding: la imagen comienza desde el área de padding (por defecto).
• bg-origin-content: la imagen comienza desde el área de contenido.

<div class="bg-origin-border bg-no-repeat bg-cover p-8 border-4 border-dashed border-gray-400 h-48"
     style="background-image: url('https://picsum.photos/400/200')">
  Origen desde el borde
</div>

<div class="bg-origin-content bg-no-repeat bg-cover p-8 border-4 border-dashed border-gray-400 h-48"
     style="background-image: url('https://picsum.photos/400/200')">
  Origen desde el contenido
</div>

Object-fit y object-position

Cuando se trabaja con elementos <img> o <video>, las clases de object-fit y object-position controlan cómo se ajusta el contenido dentro de su contenedor. A diferencia de las propiedades de fondo, estas se aplican directamente sobre la etiqueta del medio.

Object-fit

La propiedad object-fit define cómo se redimensiona el contenido del elemento para encajar en su caja:

• object-cover: el contenido cubre todo el contenedor, recortando las partes sobrantes.
• object-contain: el contenido se muestra completo dentro del contenedor, respetando sus proporciones.
• object-fill: el contenido se estira para rellenar todo el contenedor, pudiendo deformarse.
• object-none: el contenido mantiene su tamaño original sin escala.
• object-scale-down: el contenido se reduce solo si es necesario (equivale al menor entre none y contain).

<div class="grid grid-cols-3 gap-4">
  <img src="https://picsum.photos/600/400" alt="Cover"
       class="object-cover w-full h-48 rounded-lg">

  <img src="https://picsum.photos/600/400" alt="Contain"
       class="object-contain w-full h-48 rounded-lg bg-gray-100">

  <img src="https://picsum.photos/600/400" alt="Fill"
       class="object-fill w-full h-48 rounded-lg">
</div>

La clase object-cover es la opción preferida en galerías y tarjetas de producto porque mantiene las proporciones de la imagen sin dejarla deformada ni con huecos.

Object-position

Para controlar qué parte de la imagen queda visible cuando se recorta con object-cover, se utilizan las clases de posición del objeto:

• object-center: centra el contenido (por defecto).
• object-top, object-bottom: alinea al borde superior o inferior.
• object-left, object-right: alinea al borde izquierdo o derecho.
• object-left-top, object-left-bottom, object-right-top, object-right-bottom: combinaciones de esquina.

<img src="https://picsum.photos/600/400" alt="Posición superior"
     class="object-cover object-top w-full h-32 rounded">

<img src="https://picsum.photos/600/400" alt="Posición inferior derecha"
     class="object-cover object-right-bottom w-full h-32 rounded">

Estas clases son especialmente útiles para imágenes de retrato en tarjetas de perfil, donde interesa que la cara del usuario quede visible aunque el contenedor sea apaisado.

Aspect ratio

La utilidad aspect-ratio de Tailwind CSS permite definir la proporción entre el ancho y el alto de un elemento, garantizando que mantenga esa relación independientemente del tamaño de la pantalla.

Clases predefinidas

Tailwind incluye tres clases de relación de aspecto listas para usar:

• aspect-auto: deja que el navegador determine la relación de aspecto automáticamente.
• aspect-video: establece una proporción 16/9, la más habitual en contenido multimedia.
• aspect-square: establece una proporción 1/1, ideal para avatares y miniaturas.

<!-- Contenedor de vídeo con proporción 16:9 -->
<div class="aspect-video w-full bg-gray-900 rounded-lg overflow-hidden">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"
          class="w-full h-full" allowfullscreen>
  </iframe>
</div>

<!-- Avatar cuadrado -->
<img src="https://picsum.photos/300/300" alt="Avatar"
     class="aspect-square w-24 rounded-full object-cover">

Valores arbitrarios

Para relaciones de aspecto no incluidas en las clases predefinidas, se pueden utilizar valores arbitrarios con la notación de corchetes:

<!-- Proporción 4:3 -->
<div class="aspect-[4/3] w-full bg-gray-200 rounded">
  Contenedor 4:3
</div>

<!-- Proporción 21:9 ultrawide -->
<div class="aspect-[21/9] w-full bg-gray-200 rounded">
  Contenedor ultrawide
</div>

Ejemplo práctico: galería de imágenes responsiva

Este ejemplo combina varias de las utilidades vistas para construir una galería de imágenes adaptable a distintos tamaños de pantalla:

<section class="p-6 bg-gray-50">
  <h2 class="text-3xl font-bold bg-clip-text text-transparent
             bg-gradient-to-r from-indigo-600 to-cyan-500 mb-6">
    Galería de fotos
  </h2>

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="aspect-square overflow-hidden rounded-xl">
      <img src="https://picsum.photos/600/600?random=1" alt="Foto 1"
           class="object-cover w-full h-full hover:scale-110 transition duration-300">
    </div>
    <div class="aspect-video overflow-hidden rounded-xl">
      <img src="https://picsum.photos/800/450?random=2" alt="Foto 2"
           class="object-cover w-full h-full hover:scale-110 transition duration-300">
    </div>
    <div class="aspect-[4/3] overflow-hidden rounded-xl">
      <img src="https://picsum.photos/800/600?random=3" alt="Foto 3"
           class="object-cover object-top w-full h-full hover:scale-110 transition duration-300">
    </div>
  </div>
</section>

En este ejemplo, cada imagen utiliza object-cover para cubrir su contenedor, y la clase aspect-* correspondiente garantiza la proporción deseada. La transición hover:scale-110 añade un efecto de zoom al pasar el ratón por encima, contenido dentro del overflow-hidden del contenedor para que no desborde.