Which CSS background properties make a hero image cover its container?

WHAT THIS TESTS: This question tests your understanding of the background-size property and its keyword values, specifically the difference between cover and contain. It also checks whether you grasp aspect-ratio preservation in CSS and can identify the correct tool for a common design requirement without distorting image content. Senior candidates should demonstrate they know not just the syntax but the visual behavior each keyword produces.

A GOOD ANSWER COVERS: First, state background-size: cover as the primary solution. Explain that cover scales the image to the smallest possible size so that both its width and height completely fill the container, preserving the image's intrinsic aspect ratio. Second, note that because the image and container proportions may differ, cover will crop the image either vertically or horizontally, which is exactly what the designer requested. Third, contrast this with contain, which scales the image as large as possible without cropping or stretching, leaving empty space that may show the background color. Fourth, mention background-repeat: no-repeat to ensure no tiling occurs in edge cases, and note that any transparent areas would reveal the background-color behind the image.

COMMON WRONG ANSWERS: A red flag is suggesting background-size: 100% 100% or explicit length pairs like 200px 100px. These values force the image to match the container's dimensions exactly, which stretches or squashes the image and destroys its aspect ratio. Another mistake is offering contain as the answer, since it deliberately avoids cropping and would leave unfilled space. Some candidates might suggest object-fit: cover, which is the correct concept but applies to img tags and CSS images acting as content, not background images.

LIKELY FOLLOW-UPS: An interviewer might ask how you control which part of the image remains visible during the crop, which is handled by background-position. They might also ask how you would achieve the same effect on an img element instead of a background image, where object-fit: cover is the parallel solution. Another follow-up could involve responsive behavior and how cover behaves when the container changes aspect ratio across breakpoints.

ONE CONCRETE EXAMPLE: Imagine a hero section that is 100 viewport width and 60 viewport height. The background image is 1600 pixels by 900 pixels. Setting background-size: cover scales the image until the shorter dimension relative to the container reaches the container edge. On a wide desktop, the image might fill the height first and crop excess width from the sides. On a narrow mobile device, the image might fill the width first and crop excess height from the top and bottom. The image never stretches, and the container always remains fully covered.

Source: developer.mozilla.org