background-position

Ejemplos

Ejemplo básico

Usa 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>

Usando un valor personalizado

Usa la sintaxis bg-position-[<value>] para establecer el background position basado 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 agrega la función var() por ti automáticamente.

Diseño Responsive

Prefija una utilidad background-position con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

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

Aprende más sobre el uso de variantes en la documentación de variantes.