bg-bottom

Position the background image at the bottom of the element. Perfect for footers, ground-level imagery, and designs where the bottom portion is most important.

Quick Reference

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

Interactive Demo

Bottom-Aligned Background

Bottom-Aligned Content

Background anchored to bottom edge

HTML Code

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

Vertical Position Comparison

bg-top

Top alignment

bg-center

Center alignment

bg-bottom

Bottom alignment

Real-world Examples

Footer Section

Contact Us

Get in touch for more information

 <footer class="h-40 bg-bottom bg-cover" style="background-image: url(...)">
   <!-- Footer content at bottom -->
 </footer>

Product Showcase

Premium Product

High-quality materials and craftsmanship

 <div class="p-4"><!-- Product info --></div>
 <div class="h-32 bg-bottom bg-cover" style="background-image: url(...)"></div>

Bottom Corner Variations

bg-left-bottom

Bottom-Left

background-position: left bottom;

bg-bottom

Bottom-Center

background-position: bottom;

bg-right-bottom

Bottom-Right

background-position: right bottom;

When to Use bg-bottom

✅ Perfect For

• Footer sections and bottom navigation
• Ground-level or foundation imagery
• Product base/stand photography
• Landscape with important foreground
• Call-to-action sections
• Signature or watermark areas

🎯 Benefits

• Ensures bottom content visibility
• Great for grounding visual elements
• Works well with tall containers
• Natural for footer positioning
• Stable foundation feeling
• Good for action-oriented content

Responsive Considerations

Mobile Optimization

Bottom positioning works especially well on mobile devices for:

• Thumb-friendly interaction areas
• Natural scrolling endpoints
• Footer content accessibility
• Portrait image optimization

Responsive Variants

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

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