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.