Why does background-size: cover crop part of my background image?

cover has a different goal: fill the entire background positioning area without leaving uncovered space. It scales the image proportionally until both dimensions cover that area. If the image and area have different proportions, the image will be too large along at least one dimension, and the overflow is cropped. [S1]

For example, assume a 1200 × 900 image and a 600 × 300 area. To cover the area, the image scales to 600 × 450: its width fits, but its height exceeds the area by 150 pixels. With a centered position, that excess is divided between the top and bottom. This is an illustrative calculation, not a measurement of your image.

.hero {
  background-image: url("[image-path]");
  background-size: cover;
}

Think of it this way: cover fills the box first; cropping is the tradeoff when the proportions differ.

Compare the proportions of the image with the proportions of the area. In the example above, the scaled image is taller than the area, so the top and bottom cannot all remain visible at once:

Scaled image: 600 × 450
┌──────────────────────────┐
│  75px outside the area   │  cropped
├──────────────────────────┤
│                          │
│     visible area         │  600 × 300
│                          │
├──────────────────────────┤
│  75px outside the area   │  cropped
└──────────────────────────┘

If instead the scaled image extends beyond the area's width, the crop is on the left and right. The amount and direction depend on the image dimensions, the area dimensions, and its position. The positioning area depends on the background positioning rules; it is the padding box by default, while fixed attachment uses the viewport. [S1]

To check your own case, inspect the element's dimensions and the source image's dimensions, then compare their proportions. The diagram is an illustration; your layout's measurements determine the actual crop.

Set background-position to change which portion of the oversized image is visible. The default position is 0% 0%. Percentage positions depend on the size difference between the image and area, so the same percentage does not mean a fixed number of pixels. [S2]

Try a few positions while previewing the actual image:

.hero {
  background-size: cover;
  background-position: center;
}

.hero--alternate {
  background-position: 70% 50%;
}

center is a useful comparison point; the second rule is an example to test, not a promise that it will keep a particular subject visible. If the image and area are the same size along an axis, adjusting the percentage on that axis has no effect because there is no size difference there. [S2] Choose the position based on what you need to keep in view.

First decide whether filling the whole area or showing the entire image matters more. cover fills the area, but mismatched proportions can mean cropping. [S1] If you want to keep more of the image, consider changing the element's dimensions or choosing a layout that does not require the background to fill every edge; preview the result rather than assuming it will fit a particular way.

A simple test is to change one setting at a time: keep the same image and element size, preview cover, then adjust background-position and compare what remains visible. Record the image dimensions, element dimensions, and position for each version so you can reproduce the preferred result. If the subject is near an edge, check that edge at the actual display size too; a position that works in one area may not suit another.

The core tradeoff is straightforward: cover fills the area, and mismatched proportions mean cropping; positioning controls which part of an oversized image you see. [S1][S2]