How to use background-size in CSS

The CSS background-size property sets the size of the background image of the element. Images can be left to full size, stretched or limited to fit the available space.

background-image: url('some-example-image.jpg');

Cover #

background-size: cover;

cover scales the image, keeping its proportions, until it fills the whole element. Whatever doesn’t fit gets cropped, either at the top and bottom or at the sides. It suits hero sections and cards, where an empty strip would look worse than a trimmed edge.

Size in pixels or percentage #

background-size: 300px;

background-size: 15%;

With one value you set only the width. The height becomes auto, so the image keeps its proportions. A percentage is measured against the element’s background area (the padding box by default), not against the image. Two values set the width and the height, and the image is stretched to exactly that size:

background-size: 300px 200px;

Contain #

background-size: contain;

contain scales the image as large as it can while keeping all of it visible. Nothing is cropped, but you can get empty bands at the sides or at the top and bottom, and the image repeats into them unless you turn repeating off.

Background-Repeat #

If the container is larger than the image, this will mosaic the image if the background-repeat property is not set to no-repeat.

background-repeat: no-repeat;

Background-Position #

The background-position CSS property sets the initial position for each background image.

background-position: center;

Background-Color #

Spaces not covered by the background image are filled with the background-color property, and the background color will be visible on background images that have transparency.

background-color: lightgreen;

The background shorthand resets the size #

The background shorthand resets every background property it doesn’t mention, background-size included. Put it after your background-size line and the size is gone:

.hero {
  background-size: cover;
  background: url('some-example-image.jpg') no-repeat; /* resets background-size to auto */
}

Chrome reports the computed background-size of that element as auto. Either move background-size below the shorthand, or put the size inside the shorthand. Inside it, the size goes right after the position, separated by a slash:

.hero {
  background: url('some-example-image.jpg') center / cover no-repeat;
}

That version computes to cover. The definitions of cover, contain and the one- and two-value forms all come from MDN: background-size.