CSS Property: background-size
The size of a background image.
Possible 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. */