How CSS background-size: cover Scales Images

The background-size: cover property in CSS is a responsive design standard used to scale background images proportionally so they completely fill their target container. This article explains the underlying mechanics of how cover calculates image dimensions, preserves aspect ratios, handles unavoidable cropping, and interacts with positioning properties to achieve consistent visual results across different screen sizes.

The Scaling Mechanism

When you apply background-size: cover to an element, the browser scales the background image to the smallest possible size that still completely covers the container's background area. The browser executes this using two strict rules:

  1. Preserve the Aspect Ratio: The image is never stretched, squished, or distorted. The width-to-height ratio of the original asset is strictly maintained.
  2. Eliminate Empty Space: The image scales until both its width and height are equal to or greater than the corresponding width and height of the container.

In mathematical terms, the browser compares the aspect ratio of the image against the aspect ratio of the container:

  • Wider Containers: If the container is proportionally wider than the image, the browser scales the image so its width matches the container's width (100%). The height scales proportionally and expands beyond the container's top and bottom edges.
  • Taller Containers: If the container is proportionally taller than the image, the browser scales the image so its height matches the container's height (100%). The width scales proportionally and expands beyond the container's left and right edges.

The Inevitability of Cropping

Because viewport and element dimensions change, a fixed-aspect-ratio image rarely matches the container's aspect ratio perfectly. As a result, cover prioritizes total coverage over total visibility.

Whichever dimension exceeds the container’s bounds overflows outside the element. By default, background images do not display outside their container's padding box, meaning any overflowing parts of the image are cropped out of view.

Controlling the Focal Point with background-position

Since parts of an image are frequently cropped when using cover, controlling which portion remains visible is critical. By default, CSS anchors background images to the top-left corner (background-position: 0% 0%), causing all cropping to occur on the right and bottom edges.

Pairing background-size: cover with background-position: center center (or simply center) ensures that the browser centers the image within the container. Cropping is then distributed evenly across opposing sides—equal amounts off the left and right, or equal amounts off the top and bottom. You can also anchor the image to specific focal areas, such as top center for portraits or center right for product imagery, to keep critical content in view.

Difference Between cover and contain

To understand cover, it helps to contrast it with contain:

  • cover ensures that the entire container is covered by the image, sacrificing parts of the image to cropping if the aspect ratios do not align.
  • contain ensures that the entire image is visible within the container, sacrificing total coverage and leaving empty space (letterboxing) if the aspect ratios do not align.

Best Practices

  • Account for Mobile Displays: An image framed horizontally for desktop will be heavily cropped on vertical mobile screens. Keep key visual elements centered or use media queries to swap to a portrait-oriented asset on narrower viewports.
  • Optimize Asset Dimensions: Because cover will stretch an image to fit large viewports, use assets with sufficient resolution to prevent blurriness or pixelation on high-density displays, while compressing them properly to minimize page weight.