A perfect fit

background-size

Use this property to stretch, shrink, or perfectly fit a background image to match the element's size.

Property values

Specify one of these keyword values:

contain Scale the image to be perfectly contained within the element, preserving its aspect ratio by leaving whitespace in the unfilled area
cover Scale the image to fully cover the element, preserving its aspect ratio by clipping the overflowed area

Or specify two of these measurement units, one for the width, the other for the height.

% Shrink or stretch the image to be a given percentage of the element's width or height
px Shrink or stretch the image to be exactly that many pixels wide or high
auto Determine the amount to shrink or stretch using the other value

If only one measurement unit is provided, it is used as the rule for fitting the width of the image to the background, keeping the height in its normal aspect ratio.

Examples

/* Specifying the background to be perfectly contained within the element's area */            
background-size: contain;

/* Specifying the background to fully cover the element's area with clipping */
background-size: cover;

/* Specifying the background to stretch/shrink to the element's width */
background-size: 100% auto;

/* Specifying the background to stretch/shrink to the element's height */
background-size: auto 100%;
background-size
0

style > background > background-sizeA perfect fit

🔗 🔎