bg-right

Position the background image at the right edge of the element. Perfect for right-aligned content, secondary navigation, and designs where the right portion is most important.

Quick Reference

Class	Properties
`bg-right`	`background-position: right;`

Interactive Demo

Right-Aligned Background

Right-Aligned Content

Background anchored to right edge

HTML Code

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

Horizontal Position Comparison

bg-left

Left edge

bg-center

Center

bg-right

Right edge

Real-world Examples

Action Panel

Quick Actions

• Settings
• Profile
• Logout
• Help

Main content area

 <div class="h-48 bg-right bg-cover" style="background-image: url(...)">
   <!-- Action panel on right -->
 </div>

Product Card

Premium Package

Advanced features included

Right-aligned image

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

Right Edge Variations

bg-right-top

Right-Top

background-position: right top;

bg-right

Right-Center

background-position: right;

bg-right-bottom

Right-Bottom

background-position: right bottom;

When to Use bg-right

✅ Perfect For

• Secondary navigation panels
• Action buttons and controls
• Right-to-left reading patterns
• Product showcase images
• Call-to-action sections
• Settings and configuration areas

🎯 Benefits

• Draws attention to right-side content
• Great for action-oriented layouts
• Works well with RTL languages
• Balances left-heavy content
• Natural for secondary elements
• Mobile-friendly for landscape

RTL Language Support

Right-to-Left Languages

`bg-right` works naturally with RTL languages like Arabic and Hebrew:

 <div dir="rtl" class="bg-right bg-cover">
   <p>محتوى باللغة العربية</p>
 </div>

Logical Properties

Consider using logical properties for better internationalization:

 <!-- Use bg-end for logical right -->
 <div class="bg-end"></div>

 <!-- Responsive with logical properties -->
 <div class="bg-start md:bg-end"></div>

Responsive Behavior

Responsive Positioning

Adapt right positioning for different screen sizes:

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

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

Mobile Considerations

• Right positioning works well for action buttons
• Consider thumb accessibility on mobile
• May need adjustment for narrow screens
• Test with different device orientations