Taildev

bg-left

Position the background image at the left edge of the element. Ideal for sidebars, navigation areas, and designs where the left portion of the image is most important.

Quick Reference

ClassProperties
bg-leftbackground-position: left;

Interactive Demo

Left-Aligned Background

Left-Aligned Content

Background anchored to left edge

HTML Code

<div class="h-64 bg-left bg-no-repeat bg-cover" style="background-image: url(...)">
  <div class="flex items-center p-6">
    <p>Left-Aligned Content</p>
  </div>
</div>

Horizontal Position Comparison

bg-left

Left edge

bg-center

Center

bg-right

Right edge

Real-world Examples

Sidebar Layout

Navigation

  • • Home
  • • About
  • • Services
  • • Contact

Main content area

<div class="h-48 bg-left bg-cover" style="background-image: url(...)">
  <!-- Sidebar content on left -->
</div>

Profile Section

Jane Smith

UX Designer

Left-aligned avatar

<div class="w-16 h-16 bg-left bg-cover rounded-full" style="background-image: url(...)"></div>

Left Edge Variations

bg-left-top

Left-Top
background-position: left top;

bg-left

Left-Center
background-position: left;

bg-left-bottom

Left-Bottom
background-position: left bottom;

When to Use bg-left

✅ Perfect For

  • • Sidebar navigation layouts
  • • Profile pictures and avatars
  • • Left-to-right reading patterns
  • • Brand logo positioning
  • • Timeline or step indicators
  • • Western text flow alignment

🎯 Benefits

  • • Natural reading flow alignment
  • • Great for navigation elements
  • • Works well with text content
  • • Consistent with UI conventions
  • • Mobile-friendly for portraits
  • • Emphasizes left-side content

Responsive Behavior

Responsive Positioning

Adapt left positioning for different screen sizes:

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

<!-- Responsive left positioning -->
<div class="bg-left sm:bg-center lg:bg-left"></div>

Design Considerations

  • • Ensures left content visibility on all devices
  • • Works well with sidebar layouts
  • • Maintains brand positioning consistency
  • • Supports left-to-right reading patterns