Taildev

bg-top

Position the background image at the top of the element. Ideal for headers, banners, and designs where the top portion of the image is most important.

Quick Reference

ClassProperties
bg-topbackground-position: top;

Interactive Demo

Top-Aligned Background

Top-Aligned Content

Background starts from the top edge

HTML Code

<div class="h-64 bg-top bg-no-repeat bg-cover" style="background-image: url(...)">
  <div class="p-6">
    <p>Top-Aligned Content</p>
  </div>
</div>

Vertical Position Comparison

bg-top

Aligned to top edge

bg-center

Centered vertically

bg-bottom

Aligned to bottom edge

Real-world Examples

Header Banner

Company News

Latest updates and announcements

<div class="h-32 bg-top bg-cover" style="background-image: url(...)">
  <!-- Header content at top -->
</div>

Article Preview

Article Title

Preview text that shows below the top-aligned image...

<div class="h-32 bg-top bg-cover" style="background-image: url(...)"></div>
<div class="p-4"><!-- Article content --></div>

Top Corner Variations

bg-left-top

Top-Left
background-position: left top;

bg-top

Top-Center
background-position: top;

bg-right-top

Top-Right
background-position: right top;

When to Use bg-top

✅ Perfect For

  • • Header sections and navigation bars
  • • Article preview images
  • • Banner advertisements
  • • Landscape photography
  • • Sky or horizon-focused images
  • • Logo placement areas

🎯 Benefits

  • • Ensures important top content is visible
  • • Great for text overlay positioning
  • • Works well with tall containers
  • • Natural reading flow alignment
  • • Consistent with header expectations
  • • Mobile-friendly for portraits