The background-size property controls how a background image is scaled to fit its element, accepting explicit dimensions or the widely-used cover and contain keywords.

Syntax

background-size: value;
background-size: cover | contain;

Deep Dive Course

background-size: cover scales the image, preserving its aspect ratio, to completely fill the element's background area, cropping any excess that doesn't fit, while background-size: contain instead scales it to fit entirely within the element without cropping, potentially leaving visible empty space, letterboxing, on one axis if the image's and element's aspect ratios don't match. Explicit dimensions, like background-size: 100px 50px, or a single value applying to width with height defaulting to auto, can also be specified directly for precise, non-proportional control, though these don't automatically preserve the image's original aspect ratio the way cover and contain do.

1Understanding Background-size

💡

Use background-size: cover, paired with background-position: center, as the standard, near-universal pattern for a full-bleed hero or banner background image that should fill its container completely and stay nicely cropped and centered at any size.

editor.html

.hero {
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
}

localhost:3000

2Practical Example

Here is a real-world application of Background-size showing how it is used in production CSS code.

editor.html

.logo-box {
  background-image: url("logo.png");
  background-size: contain;
  background-repeat: no-repeat;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Background-size:

1. Use background-size: cover for a full-bleed background image that should completely fill its container, accepting some cropping to preserve the image's aspect ratio

2. Use background-size: contain when the entire image must remain fully visible without cropping, accepting potential empty space around it instead

3. Pair background-size with background-position: center for the standard combination used for a responsive, properly-cropped and centered hero background image

⚠️

Tip: Use background-size: cover, paired with background-position: center, as the standard, near-universal pattern for a full-bleed hero or banner background image that should fill its container completely and stay nicely cropped and centered at any size.

editor.html

.hero {
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
}

localhost:3000

Examples

Example 01Basic Usage

.hero {
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
}

Example 02Advanced Example

.logo-box {
  background-image: url("logo.png");
  background-size: contain;
  background-repeat: no-repeat;
}

Best Practices

Use background-size: cover for a full-bleed background image that should completely fill its container, accepting some cropping to preserve the image's aspect ratio
Use background-size: contain when the entire image must remain fully visible without cropping, accepting potential empty space around it instead
Pair background-size with background-position: center for the standard combination used for a responsive, properly-cropped and centered hero background image

Interview Question

Why might background-size: contain leave visible empty space around a background image, while background-size: cover never does, even for the exact same image and element?▼

Hint: Think about what each value actually prioritizes — showing the entire image without cropping, versus completely filling the element without gaps — and how those two goals can conflict when the image's and element's aspect ratios don't match.

contain and cover represent two different priorities that directly conflict whenever an image's aspect ratio doesn't exactly match its container's aspect ratio: contain guarantees the entire image remains fully visible with nothing cropped off, which means it scales the image only as large as it can go while still fitting completely within the container on both axes, and if the container's proportions differ from the image's, this necessarily leaves uncovered space, letterboxing, on whichever axis has room to spare. cover instead guarantees the container is completely filled with no empty gaps, which means it scales the image up until it's large enough to cover both axes fully, and if the proportions don't match, achieving that full coverage necessarily means part of the image extends beyond the container's edges and gets cropped off. Since these two goals, no cropping versus no empty space, are fundamentally incompatible whenever the aspect ratios genuinely differ, the same image and same container will predictably show empty space with contain and predictably show cropping with cover, and only when the aspect ratios happen to match exactly do both values produce the identical, gap-free, uncropped result.

Exercises

MediumPractice using Background-size in a real scenario.

View Solution

.hero {
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
}

Frequently Asked Questions

Why might background-size: contain leave visible empty space around a background image, while background-size: cover never does, even for the exact same image and element?▼

Related Functions

Background-imageBackground-positionBackground-repeat