Taildev

bg-center

Position the background image at the center of the element. Perfect for hero sections, cards, and any design where centered imagery creates visual balance.

Quick Reference

ClassProperties
bg-centerbackground-position: center;

Interactive Demo

Centered Background

Background Centered

Image positioned at center point

HTML Code

<div class="h-64 bg-center bg-no-repeat bg-cover" style="background-image: url(...)">
  <div class="h-full flex items-center justify-center">
    <p>Background Centered</p>
  </div>
</div>

Position Comparison

bg-top

Top

bg-center

Center

bg-bottom

Bottom

Real-world Examples

Hero Section

Welcome

Perfectly centered background

<div class="h-48 bg-center bg-cover bg-no-repeat" style="background-image: url(...)">
  <!-- Hero content -->
</div>

Profile Card

John Doe

Designer

<div class="w-24 h-24 bg-center bg-cover bg-no-repeat rounded-full" style="background-image: url(...)"></div>

When to Use bg-center

✅ Perfect For

  • • Hero sections and banners
  • • Profile pictures and avatars
  • • Card backgrounds
  • • Logos and icons
  • • Symmetrical designs
  • • Focus on central subjects

🎯 Benefits

  • • Creates visual balance
  • • Works well with any aspect ratio
  • • Safe default for most images
  • • Maintains focus on main subject
  • • Responsive-friendly
  • • Universal appeal

Responsive Behavior

Responsive Positioning

Use responsive variants to change background position at different screen sizes:

<!-- Center on mobile, top on desktop -->
<div class="bg-center md:bg-top"></div>

<!-- Different positions for different screens -->
<div class="bg-center sm:bg-top lg:bg-bottom"></div>

Why Center Works

  • • Maintains subject visibility on all devices
  • • Adapts well to different container sizes
  • • Provides consistent user experience
  • • Safe fallback for unknown image dimensions