CSS Property: background-size
The size of a background image.
background-size: contain and background-size: coverPossible Values
| Value | Description | Example |
|---|---|---|
auto | The intrinsic dimensions (or aspect ratio, if used alongside another value; see below) of the image. Default behavior. | |
| [length] | When used alone, this refers to the width of the image while the height defaults to auto. | 64px |
| [percentage] | Percentage of the background positioning area (defined by background-origin). When used alone, this refers to the width of the image while the height defaults to auto. | 25% |
contain | Image is scaled to the largest size possible so that the entire image fits inside the background positioning area. Image aspect ratio is maintained. | |
cover | Image is scaled to the largest size possible so that it fills the background positioning area. Image width or height is clipped while its aspect ratio is maintained. | |
| [value] [value] | The image width (first value) and height (second value). Values can be a mix of auto, lengths, and percentages. | 100% 32px |
[values], [values] | For multiple backgrounds. Values separated by commas correspond to multiple images separated by commas with background-image. | 100% 32px, cover |
inherit | ||
initial | ||
unset | ||
Example
header {
background-image: url("logo.png");
background-size: 100% 50%;
}
/* "logo.png" is stretched to the entire width of the header and half of its height. */