background-position

Ejemplos

Ejemplo básico

Utiliza utilidades como bg-center, bg-right y bg-top-left para controlar la posición de la imagen de fondo de un elemento:

Pasa el cursor sobre estos ejemplos para ver la imagen completa

bg-top-left

bg-top

bg-top-right

bg-left

bg-center

bg-right

bg-bottom-left

bg-bottom

bg-bottom-right

<div class="bg-[url(/img/mountains.jpg)] bg-top-left"></div><div class="bg-[url(/img/mountains.jpg)] bg-top"></div><div class="bg-[url(/img/mountains.jpg)] bg-top-right"></div><div class="bg-[url(/img/mountains.jpg)] bg-left"></div><div class="bg-[url(/img/mountains.jpg)] bg-center"></div><div class="bg-[url(/img/mountains.jpg)] bg-right"></div><div class="bg-[url(/img/mountains.jpg)] bg-bottom-left"></div><div class="bg-[url(/img/mountains.jpg)] bg-bottom"></div><div class="bg-[url(/img/mountains.jpg)] bg-bottom-right"></div>

Usar un valor personalizado

Usa la sintaxis bg-position-[<value>] para establecer el/la posición de fondo basándose en un valor completamente personalizado:

<div class="bg-position-[center_top_1rem] ...">  <!-- ... --></div>

Para variables CSS, también puedes usar la sintaxis bg-position-(<custom-property>) :

<div class="bg-position-(--my-bg-position) ...">  <!-- ... --></div>

Esto es solo un atajo para bg-position-[var(<custom-property>)] que añade la función var() por ti automáticamente.

Diseño responsivo

Antepone a la utilidad background-position el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

<div class="bg-center md:bg-top ...">  <!-- ... --></div>

Obtén más información sobre el uso de variantes en la documentación de variantes.