Background Position

Control the position of background images with precise placement utilities. From corners to center, position your backgrounds exactly where you need them.

Quick Reference

Class	Properties	Description
`bg-bottom`	`background-position: bottom;`	Position at bottom center
`bg-center`	`background-position: center;`	Position at center
`bg-left`	`background-position: left;`	Position at left center
`bg-left-bottom`	`background-position: left bottom;`	Position at left bottom corner
`bg-left-top`	`background-position: left top;`	Position at left top corner
`bg-right`	`background-position: right;`	Position at right center
`bg-right-bottom`	`background-position: right bottom;`	Position at right bottom corner
`bg-right-top`	`background-position: right top;`	Position at right top corner
`bg-top`	`background-position: top;`	Position at top center

Position Grid

bg-left-top

bg-top

bg-right-top

bg-left

bg-center

bg-right

bg-left-bottom

bg-bottom

bg-right-bottom

Real-world Examples

🎯 Hero Banner

Welcome to Our Site

Centered background for balanced design

<div class="h-48 bg-center bg-cover" style="background-image: url(...)">

👤 Profile Card

John Doe

Top-right positioned header

<div class="h-24 bg-right-top bg-cover">

✨ Feature Card

Amazing Feature

Left-positioned accent for visual hierarchy

<div class="bg-left bg-no-repeat opacity-20">

🚀 CTA Section

Get Started Today

Bottom accent for call-to-action

<div class="bg-bottom bg-no-repeat opacity-30">

Responsive Usage

📱 Mobile-first Approach

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

 <!-- Left on mobile, center on larger screens -->
 <div class="bg-left sm:bg-center"></div>

 <!-- Responsive corners -->
 <div class="bg-left-top md:bg-right-top lg:bg-center"></div>

💡 Best Practices

•Use bg-center as safe default
•Consider image focal points when choosing position
•Test on different screen sizes and orientations
•Combine with bg-cover or bg-contain
•Use corner positions for decorative elements

Custom Positions

🎯 Arbitrary Values

bg-[center_top_1rem]

⚙️ Custom Config

 // tailwind.config.js
 module.exports = {
   theme: {
     backgroundPosition: {
       'bottom-4': 'center bottom 1rem',
       'top-4': 'center top 1rem',
       'center-bottom': 'center bottom',
     }
   }
 }