Background Size, Position, and Repeat

Control how a background image is sized, placed and repeated inside its element.

background-size: cover scales the image to fill the box, potentially cropping some parts. contain fits the whole image without cropping, potentially leaving empty space. background-position sets its alignment, while background-repeat controls tiling.

When one shorthand background declaration combines many settings, remember that it can reset omitted background longhands.

The background positioning area is tied to the element box; changing element size can change the crop, even with the same image.

Contain keeps the whole illustrated tile visible.

HTML

<div class="scene contain">contain</div>

CSS

.scene { width: 100%; min-height: 140px; border: 1px solid #94a3b8; background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22320%22%20height=%22120%22%3E%3Crect%20width=%22320%22%20height=%22120%22%20fill=%22%23bfdbfe%22/%3E%3Ccircle%20cx=%2280%22%20cy=%2260%22%20r=%2236%22%20fill=%22%230f766e%22/%3E%3Cpath%20d=%22M170%20100L235%2020L300%20100Z%22%20fill=%22%237c3aed%22/%3E%3C/svg%3E"); background-color: #f1f5f9; background-position: center; background-repeat: no-repeat; }
.contain { background-size: contain; }

Rendered output

Observe: The entire illustrative SVG fits inside the box; the surface may remain visible around it.

Cover enlarges the image until the box is filled.

HTML

<div class="scene cover">cover</div>

CSS

.scene { width: 100%; min-height: 140px; border: 1px solid #94a3b8; background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22320%22%20height=%22120%22%3E%3Crect%20width=%22320%22%20height=%22120%22%20fill=%22%23bfdbfe%22/%3E%3Ccircle%20cx=%2280%22%20cy=%2260%22%20r=%2236%22%20fill=%22%230f766e%22/%3E%3Cpath%20d=%22M170%20100L235%2020L300%20100Z%22%20fill=%22%237c3aed%22/%3E%3C/svg%3E"); background-color: #f1f5f9; background-position: center; background-repeat: no-repeat; }
.cover { background-size: cover; }

Rendered output

Observe: The background occupies the full panel but parts of its image may be cropped.

The background positioning area is tied to the element box; changing element size can change the crop, even with the same image.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• cover is not guaranteed to display every part of an image.
• Remember that background-repeat defaults to repeating, which can surprise you with small images.

Set background-position: right center on the cover example and note which region stays visible.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Select between cover and contain based on whether filling the box or preserving the whole image matters.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.