CSS Background Size: Cover

Last reviewed on 2026-10-03

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

Cover vs Contain vs 100% 100% vs Auto: Common Questions

Why use 100% 100% if cover already fills the element?

Both leave no empty space, but they get there differently. cover keeps the image's aspect ratio and crops whatever overflows the box. 100% 100% sets the image width to the box width and its height to the box height independently, so nothing is cropped but the image is stretched or squashed whenever the box's proportions differ from the image's. Use cover for photos and anything with recognisable shapes; use 100% 100% only for artwork that still looks right when distorted (simple gradients, abstract shapes, or SVGs drawn with preserveAspectRatio="none").

When should I use contain instead?

When the whole image must stay visible, such as a logo or a diagram. contain scales the image until it fits entirely inside the box, so the uncovered area shows the background-color (or repeats of the image unless you set background-repeat: no-repeat).

What does auto do?

auto is the initial value: the image is drawn at its intrinsic size and is not scaled to the box at all. A large photo is cropped by a small box, and a small image tiles (or leaves gaps with no-repeat).

Background Image Not Covering the Whole Page or Element?

If cover seems to stop short, the background is usually doing exactly what it was told, but the box it is painting is smaller than you think. Common causes and fixes:

  • The element has no height. A background only paints the element's box, so an empty div or a section with little content shows only a sliver. Give it a min-height (for example min-height: 100vh for a full-screen hero) rather than a fixed height, so content can still grow.
  • Full-page backgrounds on body. A background set on body is propagated to the canvas, but cover is sized against the root element's box, which can be shorter than the window on short pages. Set html { min-height: 100%; } (or body { min-height: 100vh; }), or put the background on html instead.
  • The image repeats below the content. Add background-repeat: no-repeat, and give the element enough height as above.
  • background-attachment: fixed on mobile. With fixed, cover is sized against the viewport rather than the element, and mobile browsers (notably iOS Safari) do not support fixed backgrounds well, which can produce a hugely zoomed or blurry image. Use background-attachment: scroll on small screens, or use a fixed-position pseudo-element for the image instead.
  • Margins or padding around the element. A gap at the edge of the page is often the default body margin (body { margin: 0; }), not the background.
/* Full-page cover background that always fills the window */
html {
    min-height: 100%;
    background: #0a0a0a url('page-bg.jpg') center / cover no-repeat;
}

body {
    margin: 0;
}

/* Full-screen section */
.hero {
    min-height: 100vh;
    background: url('hero.jpg') center / cover no-repeat;
}

/* Fixed backgrounds: fall back to scroll on touch devices */
@media (hover: none) {
    .hero {
        background-attachment: scroll;
    }
}

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

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');
}

For art direction with real image elements, use <picture> plus object-fit: cover instead of a CSS background:

<!-- HTML: picture element for art direction -->
<picture>
    <source media="(min-width: 1200px)"
            srcset="hero-desktop.webp"
            type="image/webp">
    <source media="(min-width: 768px)"
            srcset="hero-tablet.webp"
            type="image/webp">
    <img src="hero-mobile.jpg"
         alt="Hero image"
         style="width: 100%; height: 100%; object-fit: cover;">
</picture>

Common Patterns and Solutions

A common problem with cover is the wrong part of the image staying visible after the crop — usually a face or logo. The fix is background-position, but the wider list of cover-related failures (and other background bugs that look similar) is collected in common CSS background mistakes.

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:
        auto,        /* Texture at natural size */
        cover,       /* Gradient covers */
        cover;       /* Image covers */
    background-repeat:
        repeat,      /* Texture tiles */
        no-repeat,
        no-repeat;
    background-position:
        0 0,
        center,
        center;
}

3. Fallback Strategies

/* Robust fallback approach */
.cover-with-fallback {
    /* 1. Solid color fallback */
    background-color: #667eea;
    
    /* 2. Image on top, gradient underneath: the gradient
          shows while the image loads or if it fails */
    background-image: url('hero.jpg'),
                      linear-gradient(135deg, #667eea, #764ba2);
    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 is supported unprefixed in all current browsers, including Chrome, Firefox, Safari, Edge and their mobile versions, and in Internet Explorer 9 and later. Vendor prefixes (-webkit-, -moz-) are no longer needed.

The main mobile caveat is not cover itself but background-attachment: fixed, which many mobile browsers ignore or render poorly (see the fixes above).

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
© 2026 CSS Top Sites. All rights reserved. About Contact Privacy Terms Cookies