CSS Background Size: Cover

Create perfect full-coverage backgrounds that scale beautifully

Home » CSS Background Size Cover

The background-size: cover value is one of the most powerful and commonly used CSS properties for creating responsive, full-coverage backgrounds. It ensures your background image always covers the entire container while maintaining its aspect ratio, making it perfect for hero sections, cards, and any design that needs edge-to-edge imagery.

Understanding Background-Size: Cover

When you set background-size: cover, the browser scales the background image to be as small as possible while ensuring both dimensions are greater than or equal to the container's dimensions. This means:

  • The image completely covers the container
  • The aspect ratio is preserved
  • Parts of the image may be clipped if aspect ratios don't match
  • No empty space is visible in the container

Cover vs Other Background-Size Values

cover

Scales image to cover entire container. May crop edges.

background-size: cover;

contain

Scales image to fit entirely within container. May show empty space.

background-size: contain;

100% 100%

Stretches to exact container size. May distort image.

background-size: 100% 100%;

Visual Comparison Table

Value Behavior Aspect Ratio Coverage Best Use Case
cover Scales to cover container ✅ Preserved ✅ Full coverage Hero sections, full-bleed designs
contain Scales to fit inside ✅ Preserved ❌ May have gaps Logos, icons, complete visibility needed
100% 100% Stretches to fill ❌ Distorted ✅ Full coverage Patterns, abstract backgrounds
auto Natural size ✅ Preserved ❌ Depends on image Small icons, precise sizing

Interactive Resize Demo

Resize to See How Cover Behaves

Drag the corner to resize this container and watch how background-size: cover maintains full coverage:

background-size: cover;

Responsive Design with Cover

Mobile (320px)

Cover on Mobile

Tablet (768px)

Cover on Tablet

Desktop (1200px+)

Cover on Desktop

Responsive Implementation

/* Basic responsive hero with cover */
.hero {
    min-height: 50vh;
    background-image: url('hero-mobile.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Load different images for different screen sizes */
@media (min-width: 768px) {
    .hero {
        min-height: 70vh;
        background-image: url('hero-tablet.jpg');
    }
}

@media (min-width: 1200px) {
    .hero {
        min-height: 100vh;
        background-image: url('hero-desktop.jpg');
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    .hero {
        background-image: url('[email protected]');
    }
}

Background Position with Cover

When using cover, the background-position property becomes crucial as it determines which part of the image remains visible when cropping occurs:

center (default)

background-position: center;

top

background-position: top;

bottom right

background-position: bottom right;

Aspect Ratio Considerations

16:9

Widescreen

4:3

Standard

1:1

Square

9:16

Portrait

💡 Pro Tip: Maintaining Aspect Ratios

Use the CSS aspect-ratio property with background-size: cover to create responsive containers that maintain specific proportions:

/* Responsive 16:9 container with cover background */
.video-thumbnail {
    aspect-ratio: 16/9;
    background-image: url('thumbnail.jpg');
    background-size: cover;
    background-position: center;
    width: 100%;
}

Real-World Use Cases

1. Hero Sections

Welcome to Our Site

Background-size: cover ensures this looks great at any size

/* Full-screen hero with text overlay */
.hero-section {
    min-height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
                url('hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}

2. Card Backgrounds

Card Title

Card Title

Card Title

/* Cards with cover backgrounds */
.card {
    height: 300px;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
                url('card-bg.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    padding: 2rem;
    color: white;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

Performance Optimization

⚡ Performance Considerations

  • Image Size: Use appropriately sized images - not larger than the maximum display size
  • Format: Use modern formats like WebP or AVIF with JPEG fallbacks
  • Loading: Consider lazy loading for below-the-fold images
  • Compression: Optimize images before serving

Optimization Techniques

/* Progressive enhancement approach */
.optimized-hero {
    /* Fallback color */
    background-color: #667eea;
    
    /* Low-quality placeholder */
    background-image: url('hero-lqip.jpg');
    background-size: cover;
    background-position: center;
}

/* Load high-quality image when ready */
.optimized-hero.loaded {
    background-image: url('hero-hq.jpg');
}

/* Use picture element for art direction */

    
    
    Hero image

Common Patterns and Solutions

1. Text Readability on Cover Backgrounds

/* Ensure text readability with overlays */
.text-on-image {
    background: 
        /* Gradient overlay */
        linear-gradient(to bottom, 
            rgba(0,0,0,0.3) 0%, 
            rgba(0,0,0,0.7) 100%),
        /* Main image */
        url('background.jpg');
    background-size: cover;
    background-position: center;
}

/* Alternative: Blur backdrop */
.text-overlay {
    backdrop-filter: blur(5px);
    background: rgba(0,0,0,0.5);
    padding: 2rem;
}

2. Cover with Multiple Backgrounds

/* Layered backgrounds with cover */
.multi-bg {
    background: 
        /* Texture overlay */
        url('texture.png'),
        /* Gradient */
        linear-gradient(135deg, rgba(102,126,234,0.8), rgba(118,75,162,0.8)),
        /* Main image */
        url('main-bg.jpg');
    background-size: 
        repeat,      /* Texture repeats */
        cover,       /* Gradient covers */
        cover;       /* Image covers */
    background-position: 
        0 0,
        center,
        center;
}

3. Fallback Strategies

/* Robust fallback approach */
.cover-with-fallback {
    /* 1. Solid color fallback */
    background-color: #667eea;
    
    /* 2. Gradient fallback */
    background-image: linear-gradient(135deg, #667eea, #764ba2);
    
    /* 3. Actual image with cover */
    background-image: url('hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Feature detection */
@supports (background-size: cover) {
    .modern-cover {
        background-size: cover;
    }
}

Browser Compatibility

✅ Excellent Browser Support

background-size: cover has universal support across all modern browsers:

  • Chrome 3+ (2009)
  • Firefox 3.6+ (2010)
  • Safari 3+ (2007)
  • Edge (all versions)
  • IE 9+ (2011)
  • Mobile browsers (all)

Best Practices

✅ Do's

  • Always set background-position for important focal points
  • Provide fallback background colors
  • Test on various aspect ratios
  • Optimize images for web delivery
  • Consider art direction for different devices
  • Use overlays for text readability

❌ Don'ts

  • Don't use unnecessarily large images
  • Avoid important content at image edges
  • Don't forget mobile optimization
  • Skip testing on real devices
  • Ignore loading performance
  • Assume one size fits all screens

Advanced Techniques

CSS Object-Fit Alternative

/* For img elements, object-fit works similarly */
img.cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Comparison: background vs img */
.bg-method {
    background-image: url('image.jpg');
    background-size: cover;
    background-position: center;
}

.img-method {
    position: relative;
    overflow: hidden;
}

.img-method img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

Debugging Tips

🔍 Debugging Background-Size: Cover

  1. Check Natural Image Dimensions: Use DevTools to see actual image size
  2. Inspect Computed Styles: Verify background-size is actually "cover"
  3. Test Different Viewports: Use responsive design mode
  4. Verify Image Loading: Check Network tab for 404s
  5. Check Container Dimensions: Ensure container has defined dimensions

Conclusion

background-size: cover is an essential CSS property for modern web design. Its ability to create responsive, full-coverage backgrounds while maintaining aspect ratios makes it perfect for hero sections, cards, and any design requiring edge-to-edge imagery. With excellent browser support and straightforward implementation, it's a reliable tool for creating visually appealing, responsive designs.

Master Background Techniques

Explore more CSS background properties and create stunning designs!

Background Generator Multiple Backgrounds