> ## Documentation Index
> Fetch the complete documentation index at: https://help.kajabi.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Personalizar la superposición de la imagen hero en Premier

> Aprende cómo funcionan las imágenes hero como acentos de fondo y cómo personalizar la superposición de imagen en Premier.

Una Imagen Hero está diseñada como un acento de fondo para tu página. Las Imágenes Hero se redimensionan dinámicamente según el tamaño de pantalla y aparecerán de forma distinta para la mayoría de los visitantes de tu sitio, según su tipo de dispositivo y configuración de pantalla.

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/tehxzpbilf" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

***

## ¿Qué es una imagen hero?

Una Imagen Hero está diseñada como un acento de fondo para tu página.

[Agregar una Sección Hero](/es/articles/website/pages/how-to-add-a-hero-section-in-your-page-with-premier) te permite crear una Imagen Hero en la que la imagen subida se redimensiona dinámicamente según el tamaño de pantalla de tu usuario, para brindar una experiencia de usuario fluida en tu página.

Para crear una Imagen Hero, cambia el espaciado a **Full Height** en tu página de Premier:

<img src="https://mintlify.s3.us-west-1.amazonaws.com/kajabi-support/es/images/launchbrightly/desktop-light-version-12-hero-section-spacing-1785429733404.png" alt="Configuración de Imagen Hero a Altura Completa" />

Esto significa que tus Imágenes Hero pueden verse distintas para cada usuario, según el dispositivo que use para ver tu página. Te recomendamos seleccionar una imagen que se adapte mejor a la naturaleza dinámica de la Imagen Hero.

<Tip>
  **Consejo:** Ten precaución al usar logos o texto, ya que pueden no ser visibles para todos los usuarios en todos los tamaños de pantalla.
</Tip>

La imagen se redimensionará desde el centro de la imagen. Teniendo esto en cuenta, asegúrate de editar tu imagen antes de subirla para que el centro de tu imagen sea el punto focal principal.

El tamaño de imagen recomendado para el Fondo de la Sección Hero es 2880 x 1200 px.

[Aprende a agregar y personalizar tu Sección Hero en Premier](/es/articles/website/pages/how-to-add-a-hero-section-in-your-page-with-premier)

***

## Superposición oscura en tu imagen de fondo hero

Si tu **Hero Background Image** se ve demasiado oscura, puedes cambiar el color de superposición ajustando la opacidad de la superposición o desactivando por completo la Superposición de Imagen.

Para desactivar la Superposición de Imagen:

* Abre la sección **Hero** en el editor de plantillas.
* En el editor de la barra lateral izquierda, desmarca **Use Image Overlay**:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/0recy6njtj" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

Para personalizar el color y la transparencia de la Superposición de Imagen:

* Abre la sección **Hero** en el editor de plantillas.
* Desplázate hasta la opción **Background Color** en la barra lateral.
* Abre el selector de color y desliza la barra de transparencia a tu gusto:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/mp70qw0t6t" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>