Background Size & Cover

The background-size property controls how large a background image is rendered within its container.

Keyword Values

cover — scales the image to be as large as possible so the background area is completely covered. The image may be cropped.
contain — scales the image to fit entirely within the background area without cropping. May leave empty space.
auto — the default; uses the image's intrinsic dimensions.

Length and Percentage Values

Two values set width then height: background-size: 200px 100px. A single value sets width with height auto-calculated.

Example

/* Full-bleed hero — always covers the container */
.hero {
    background-image: url("/img/hero.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}

/* Logo shown in full, no crop */
.logo-bg {
    background-image: url("/img/logo.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 200px;
    height: 80px;
}

/* Explicit size — HiDPI icon at half size */
.icon-bg {
    background-image: url("/img/icon@2x.png");
    background-size: 24px 24px;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
}

/* Percentage width — fluid pattern */
.pattern {
    background-image: url("/img/dot.svg");
    background-size: 5% auto;
}

CSS

Full Editor

Pro Tip

When using background-size: cover, pair it with background-position: center so the most important part of the image (usually the centre) stays visible when the image is cropped at different viewport sizes.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned