bg-cover

Scale the background image to cover the entire container. Perfect for hero sections, full-screen backgrounds, and ensuring no empty space is visible.

Quick Reference

Class	Properties
`bg-cover`	`background-size: cover;`

Interactive Demo

Full Coverage

Covers Entire Area

No empty space visible

HTML Code

 <div class="h-64 bg-cover bg-center" style="background-image: url(...)">
   <!-- Image covers entire container -->
 </div>

CSS Output

 .bg-cover {
   background-size: cover;
 }

Background Size Comparison

bg-auto

Natural

Original size

bg-cover

Covers

Fills entire area

bg-contain

Contains

Fits within bounds

Real-world Examples

Hero Section

Welcome to Our Site

Discover amazing content

 <section class="h-screen bg-cover bg-center" style="background-image: url('hero.jpg')">
   <!-- Hero content -->
 </section>

Card Background

Featured Article

This card has a cover background that fills the header area completely.

<div class="bg-cover bg-center h-32" style="background-image: url('card.jpg')"></div>

Aspect Ratio Behavior

Wide Container

Image scales to fill width

In wide containers, the image scales to fill the full width, potentially cropping the top/bottom.

Tall Container

Image scales
to fill height

In tall containers, the image scales to fill the full height, potentially cropping the left/right.

Position Control with bg-cover

bg-top

Top aligned

bg-center

Center aligned

bg-bottom

Bottom aligned

Control which part of the image remains visible when cropping occurs

When to Use bg-cover

✅ Perfect For

• Hero sections and banners
• Full-screen backgrounds
• Card header images
• Profile cover photos
• Section dividers
• Image overlays

❌ Avoid When

• Image content must be fully visible
• Precise image positioning needed
• Working with logos or icons
• Image has important edge details
• Text within image must be readable
• Aspect ratio preservation is critical

Performance & Best Practices

Optimization Strategies

• Use appropriate image dimensions
• Implement responsive images
• Consider WebP/AVIF formats
• Add loading="lazy" for below-fold images
• Use CSS gradients for simple backgrounds
• Optimize for mobile viewports

Common Patterns

 <!-- Hero with overlay -->
 <div class="h-screen bg-cover bg-center relative" style="background-image: url('hero.jpg')">
   <div class="absolute inset-0 bg-black/50"></div>
   <!-- Content -->
 </div>

 <!-- Responsive background -->
 <div class="bg-cover bg-center sm:bg-contain lg:bg-cover"></div>

Responsive Behavior

Responsive Sizing

 <!-- Different behaviors per breakpoint -->
 <div class="bg-contain sm:bg-cover lg:bg-auto"></div>

 <!-- Mobile-first approach -->
 <div class="bg-cover md:bg-contain"></div>

 <!-- Position adjustments -->
 <div class="bg-cover bg-center sm:bg-top lg:bg-bottom"></div>

Mobile Considerations

• Test image cropping on mobile devices
• Consider portrait vs landscape orientations
• Ensure important content remains visible
• Use appropriate fallback colors
• Optimize image sizes for mobile bandwidth
• Test on various screen sizes