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%;